CSS 3のセレクタ解説：属性セレクタ

エ・ビスコム・テック・ラボ
2009-02-03 15:33:01
今回はCSS 3で新しく追加された属性セレクタを紹介したい。属性セレクタへのブラウザの対応は進んでおり、Firefox、Safari、Google Chrome、Operaといったブラウザはもちろん、Internet Explorerもバージョン7から対応している。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

属性セレクタの活用

　属性セレクタを活用すると、これまではIDやクラス名に頼ってきたデザインを簡単に指定できるようになる。

　たとえば、[att$=val]を利用すると、リンク先のファイルの拡張子に応じて異なるスタイルシートを適用することができる。次のサンプルでは、リンク先のURLの末尾が「/」「htm」「html」の場合には「WEBページ」、「jpg」の場合には「JPEG画像」と表示するようにしている。

リンク先のファイルの種類が表示される リンク先のファイルの種類が表示される 
a[href$=\/]:after, a[href$=htm]:after, a[href$=html]:after{
content:"WEBページ";
color: red;
}

a[href$=jpg]:after{
content:"JPEG画像";
color: blue;
}
※ブラウザで表示を確認する

　なお、Internet Explorerでこのサンプルを表示した場合、「:after」に未対応のバージョン7では機能しないが、「:after」に対応したバージョン8では機能する。

　次回はCSS 3で追加された残りのセレクタを紹介していく。

  • 新着記事
  • 特集
  • ブログ