【CSS】リンクファイルごとにCSSを振り分け！？属性セレクタについて

今月号のWeb Designingを読んで、恥ずかしながらCSS3の【属性セレクタ】というものを初めて知りました！
この属性セレクタ、指定した要素の属性「href」や「target」などの値を判別出来るらしいのです！

例えば下記のように書くと、リンク先のファイルがPDFの時は文字が赤色、Wordファイルの時は文字が青色になります。

/*リンク先ファイルによってCSS振り分け　属性セレクタという機能らしい。IE６とか一部では動かない*/
.box ul li a[href$=".pdf"]{
	color:#F00;
}

.box ul li a[href$=".docx"]{
	color:#00F;
}

同じように、target=”_blank”の時だけ背景色を変えるなども出来ます。

.box ul li a[target$="_blank"]{
	background:#00F;
}

ちなみに、
「要素[属性$=”任意文字列”]」、と書くと属性の値の後半が一致した場合に適用、
「要素[属性^=”任意文字列”]」、と書くと属性の値の前半が一致した場合に適用です。

Web Designingではリンクされたファイルごとにアイコンを振り分ける方法として紹介されていましたが、それ以外にもいろいろ使い道がありあそうですね！

ARAKAZE NOTE