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

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

  • 最終更新:2009年7月 7日 16:39
CSS3で定義されたパターンE[foo*="bar"]の属性セレクタは、指定した属性の属性値が部分一致した場合、指定した要素にスタイルが適用されます。
対応ブラウザ
  • IE6未対応
  • IE7対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

属性セレクタのサンプル

li img[src*="/bnr/"] {
  padding: 1px;
  border: 1px solid #999;
}
<ul>
<li><img src="/img/share/logo.gif" alt="CSS HappyLifeZERO" /></li>
<li><img src="/img/bnr/css-happylife.gif" alt="CSS HappyLife" /></li>
<li><img src="/img/bnr/happyline.gif" alt="happyLine" /></li>
<li><img src="/img/bnr/digiper.gif" alt="digiper" /></li>
</ul>

部分一致させることで、bnrディレクトリに入っている画像だけスタイルが適用されるようにしています。

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

サンプルのブラウザ上の表示
  • CSS HappyLifeZERO
  • CSS HappyLife
  • happyLine
  • digiper

Movable Typeなどで特定のディレクトリに画像がアップロードされるようにしていれば、ブログ記事内の画像だけボーダーを付けるなどといった事も可能です。

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

このページの上部へ