読者です 読者をやめる 読者になる 読者になる

なんちゃってウェブ系エンジニアの備忘録

某IT企業で働くなんちゃってウェブ系エンジニアが技術やデザインなど役に立ちそうなものなどを備忘録として載せていきます

ファイルの拡張子に合わせてアイコンを表示する方法

例えば、リンク先がPDF、Excel、Wordなどのファイルの場合、
そのアイコンを表示したいっていうケースがありますよね。

これをCSSセレクタを使って、自動的にアイコンを表示できるようなので
実装方法をまとめておきます。

HTML

<p><a href="test.pdf">PDFファイルです。</a></p>
<p><a href="test.xls">Excelファイルです。</a></p>
<p><a href="test.ppt">PPTファイルです。</a></p>

CSS

a[href$='.pdf'] {
	background:url("./pdf.png") no-repeat left;
}
a[href$='.xls'] {
	background:url("./excel.png") no-repeat left;
}
a[href$='.doc'] {
	background:url("./word.png") no-repeat left;
}

とこんな書き方で、リンク先のファイルの種類によってアイコンを表示させています。
このCSSの手法を属性セレクタと呼びます。意外と知られていないようです。

上記の他には・・・

タグ[href$="bar"] href属性の値が厳密に文字列"bar"で終わる部分をマッチする
タグ[href~="bar"] href属性の値が厳密に文字列"bar"から始まる部分をマッチする
タグ[href*="bar"] href属性の値が厳密に文字列"bar"を含む部分をマッチする

上記のCSSセレクタは多くのブラウザにサポートされているようです。(IEは8以上)

参考URL
http://zng.info/specs/css3-selectors.html