トップページの中の セレクタの中の 属性セレクタ (E[foo="bar"])

属性セレクタ (E[foo="bar"])

  • 最終更新:2009年7月 5日 17:38

パターンE[foo="bar"]の属性セレクタは、ある要素の中で、指定した属性の値と完全一致した場合にスタイルが適用されます。

対応ブラウザ
  • IE6未対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

属性セレクタのサンプル

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;が適用されます。

実際のブラウザでは以下のように表示されます。

サンプルのブラウザ上の表示

こんな感じで、リンク集みたいな一覧を出している場合、オススメしたいサイトだけスタイルを変えたりといった事が可能です。
このくらいなら、対応していないIE6を無視してしまうのも有りかも知れません。(仕事ベースだと何とも言えませんが...)

input[type="text"][value="http://"]のサンプルは、IE7だと、value値が「http://」から変更し別の場所にフォーカスすると色が変わるのでちょっと面白いです。実用性は有りませんけど。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ