CSS3で定義されたパターンE[foo$="bar"]の属性セレクタは、指定した属性の属性値が後方一致した場合、指定した要素にスタイルが適用されます。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

属性セレクタのサンプル

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ファイル

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