[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
Post on:2007年9月25日
Comments
kskonblog5.0.0
on 2007年9月26日
まだまだ未知なる世界があるもんだ…
[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス
いやぁ、知らなかった。CSSは、使い方はまだまだ未熟だと感じるものの、何ができて何 (more…)
veefour's digital life
on 2010年2月13日
外部リンクにアイコンを付ける
記事中にある外部リンクにアイコンを付けました。内部リンクはそのまま。
こちらの記事を参考にしました。
→ [CSS]リンク先や拡張子ごとに
jQueryを使ってIE6でもリンクファイルの拡張子ごとにアイコンを表示させる方法。 | ウェビメモ
on 2011年9月8日
[...] 参考：[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス [...]
リンク先や拡張子ごとにアイコンを表示する方法 | NxWorld
on 2011年11月27日
[...] [CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート｜コリス [...]
リンク先や拡張子ごとにアイコンを表示する方法 | NxWorld
on 2012年3月5日
[...] [CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート｜コリス Iconize Textlinks with CSS – pooliestudio 10. Styling different link types – jQuery Tutorials for Designers｜Web Designer Wal [...]