属性セレクタ

TOPページに戻る > CSS

属性セレクタ

属性がついているHTMLの要素にスタイルを適用できます
要素名[属性名]（最初の要素に適用する要素名を書いて、その要素についている属性が一致した場合に、スタイルが適用されます）
※要素名と[属性名]の間に半角空白を入れると適用できなくなるので注意してください
※ie6は属性セレクタを使えません（ie7から使えます）

ＦＣ2のアクセス解析でユーザーのブラウザ使用状況が調べられます
解析サンプル→訪問者→ブラウザを順にクリック
IE6は0.5％前後とほとんど無視していい数になっています。この先はさらにIE6のシェアは減るでしょう

対応ブラウザ

使い方（書式）4つあります。どれも要素と[属性名]の間に空白を入れられません

要素名[属性名] { プロパティ : 値; }
/* 要素名[属性名]が一致した要素にスタイルを適用 */

要素名[属性名="値"] { プロパティ : 値; }
/* 要素名[属性名="値"]が全て一致した要素にスタイルを適用 */

要素名[属性名~="値"] { プロパティ : 値; }
/* プロパティの値に半角の空白で区切られた値があるときに使用 */

要素名[属性名|="値"] { プロパティ : 値; }
/* プロパティの値にハイフンで区切られた値があるときに使用 */

最初に要素の指定、その要素の属性を[ ]で囲んでスタイルを適用する要素を指定

実際の指定方法

cssファイル　[name="hoge"]属性と値が付いたTEXTAREA要素にスタイルを適用(横幅を500pxに指定)

textarea[name="hoge"] { width:500px;}

html部分（フォームの部品TEXTAREA要素にname="hoge"の属性と値をつけています）

<TEXTAREA name="hoge">テキストエリア</TEXTAREA>

実際の表示

テキストエリア500pxに広がりました

優先順位

※属性セレクタは、要素1ポイント+属性セレクタ10ポイントです
classセレクタとポイントが同じになります
同じポイントの場合の優先順位は下に書いたcssが優先されます

textarea[name="hoge"] { width:500px;}
/* この場合は、要素1つと属性セレクタなので1+10＝11ポイント 
[name="hoge"]この部分が10ポイントです*/

textarea.hoge { width:200px;}
/* classセレクタと同じにポイントになります。1+10＝11ポイント */

※ポイント一覧表

idセレクタ	100ポイント
class、擬似クラス、属性セレクタ、id以外のセレクタ	10ポイント
要素のみ(要素2個だと2ポイント)	1ポイント
全称セレクタ	0ポイント