HTML - CSS - セレクタ - 属性セレクタ
- 1. 概要
- 2. 基本形
- 3. 属性の有無
- 4. 属性値
1. 概要
「input」タグに対して、設定しようとして。
「input」って、「radio」やら「text」やら、やたらたくさんあって、これらに全部設定されちゃうと、それはそれで困っちゃう。
それを解消するのが、属性セレクタになります。
本ページは、下記のサイトを参考にさせていただきました。
「属性セレクター - CSS: カスケーディングスタイルシート | MDN」
「input 要素のスタイルを属性値で指定し分ける-ウェブ制作チュートリアル」
2. 基本形
基本形は、下記の形式になります。
タグ[属性]
{
プロパティ: プロパティ値;
}
タグ[属性=属性値]
{
プロパティ: プロパティ値;
}
3. 属性の有無
例題の形式をわたしは、使用したことがないのですが、参考サイトには、こういう風に提示されていました。
a[title]
{
color: purple;
}
これは、「title」という属性を持つ、「a」タグなんですって。
4. 属性値
でまぁ、これはよく使う。
すなわち
input[type="submit"]
{
text-align: center;
}
この場合、「input」タグの、「type」属性が、「submit」のもの、いわゆる、ボタンに対して設定するわけです。
この「[attr=value]」は、下記の構文があるようです。
構文 | 意味 | 備考 |
[attr=value] | attr という属性の属性値が value であるもの | |
[attr~=value] | attr という属性の属性値が value であるものを空白で区切って複数指定 | |
[attr^=value] | attr という属性の属性値が value で始まるもの | |
[attr$=value] | attr という属性の属性値の末尾が value で終るもの | |
[attr*=value] | attr という属性の属性値が value という文字列を含むもの | |
実は、他にもありますが、わたしのよう理解できないものは省略しています。
|
|