[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート

「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。

リンク先によってアイコンを変更するスタイルシートのキャプチャ

Add File Type Icons next to your links with CSS

外部リンクでアイコンを変更する場合

a[href^="http://"]{
background:transparent url(../images/external.png) center rightright no-repeat;
display:inline-block;
padding-right:15px;
}

判別する箇所のサンプル -mailto

a[href^="mailto:"]

判別する箇所のサンプル -PDF

a[href$='.pdf']

判別する箇所のサンプル -圧縮ファイル

a[href$='.zip'], a[href$='.rar'], a[href$='.gzip']

判別する箇所のサンプル -画像

a[href$='.gif'], a[href$='.jpg'], a[href$='.jpeg'], a[href$='.png']

判別する箇所のサンプル -ドキュメント

a[href$='.xls'], a[href$='.csv'], a[href$='.doc'], a[href$='.txt']

上記の指定方法はCSS3のため、動作しないブラウザもあります。
Substring matching attribute selectors

top of page

©2017 coliss