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

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

  • 最終更新:2009年6月26日 15:38

属性セレクタは、(X)HTMLなどの属性と一致した場合に適用出来るセレクタです。
他の属性セレクタにも共通していますが、属性名や属性値の大文字と小文字の区別に関しては、その言語の仕様によって変わります。

パターンE[foo]の属性セレクタは、ある要素の中で、指定した属性を持っている場合にスタイルが適用されます。

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

属性セレクタのサンプル

p[title] {
  color: blue;
}

p[class][id] {
  font-weight: bold;
  color: green;
}
<p title="青です">文字が青くなります。</p>
<p>適用されないテキスト</p>
<p class="className" id="idName">緑色で太字になります。</p>

最初のp[title]は、p要素にtitle属性が指定されていれば属性値に関わらずスタイルが適用され、p[class][id]は、p要素にclass属性とid属性が同時に指定されている場合、スタイルが適用されます。
いずれの属性も指定されていない場合は適用されません。

このサンプルを今見ているブラウザで表示すると以下のようになります。

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

文字が青くなります。

適用されないテキスト

緑色で太字になります。

どのパターンの属性セレクタもIE6が対応していないので、ご利用は計画的に。

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

このページの上部へ