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

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

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

属性セレクタのサンプル

a[href$=".zip"],
a[href$=".xls"],
a[href$=".doc"],
a[href$=".pdf"] {
  padding-left: 22px;
  background-repeat: no-repeat;
  background-position: left .2em;
}

a[href$=".pdf"] {
  background-image: url(../img/item/icon_pdf.gif);
}

a[href$=".doc"] {
  background-image: url(../img/item/icon_word.gif);
}

a[href$=".xls"] {
  background-image: url(../img/item/icon_excel.gif);
}

a[href$=".zip"] {
  background-image: url(../img/item/icon_zip.gif);
}
<ul>
<li><a href="hoge.pdf">PDFファイル</a></li>
<li><a href="hoge.xls">エクセルファイル</a></li>
<li><a href="hoge.doc">ワードファイル</a></li>
<li><a href="hoge.zip">ZIPファイル</a></li>
</ul>

リンク先のファイルの種類によってアイコンを表示させています。
各アイコンに使用している画像は以下の4種類です。

PDFアイコン エクセルアイコン ワードアイコン ZIPアイコン

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

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

こんな感じで、リンク先のファイルの種類によってアイコンを付けたい場合などに使って行けます。

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

このページの上部へ