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

エ・ビスコム・テック・ラボ
2009-02-03 15:33:01
  • このエントリーをはてなブックマークに追加

属性セレクタの活用

 属性セレクタを活用すると、これまでは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で追加された残りのセレクタを紹介していく。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]