属性セレクタ (E[foo="bar"])
パターンE[foo="bar"]
の属性セレクタは、ある要素の中で、指定した属性の値と完全一致した場合にスタイルが適用されます。
- 対応ブラウザ
-
属性セレクタのサンプル
a[href="http://css-happylife.com/"] {
font-size: 200%;
color: red;
}
input[type="text"] {
width: 200px;
padding: 5px;
}
input[type="text"][value="http://"] {
color: #666;
}
<ul>
<li><a href="http://css-happylife.com/">CSS HappyLife</a></li>
<li><a href="http://css-happylife.com/log/cssbeginner/">ビギナー向け一覧</a></li>
</ul>
<ul>
<li>名前:<input type="text" value="" /></li>
<li>URL:<input type="text" value="http://" /></li>
</ul>
パターンE[foo="bar"]
の場合、前方一致では適用されないため、ビギナー向けのリンクにスタイルは適用されません。
input要素のサンプルは、type属性がtext
の場合に基本的なスタイルが適用され、value値に「http://」が有る場合はcolor: #666;
が適用されます。
実際のブラウザでは以下のように表示されます。
- サンプルのブラウザ上の表示
-
- 名前:
- URL:
こんな感じで、リンク集みたいな一覧を出している場合、オススメしたいサイトだけスタイルを変えたりといった事が可能です。
このくらいなら、対応していないIE6を無視してしまうのも有りかも知れません。(仕事ベースだと何とも言えませんが...)
input[type="text"][value="http://"]
のサンプルは、IE7だと、value値が「http://」から変更し別の場所にフォーカスすると色が変わるのでちょっと面白いです。実用性は有りませんけど。