ファイルの拡張子に合わせてアイコンを表示する方法
例えば、リンク先が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"を含む部分をマッチする |
