CSS3:属性セレクタを使う

goto_jp 227views 更新:2014年1月21日

属性セレクタはHTML全ての要素を対象に、条件に一致する要素へスタイルを適用できます。

input[type="radio"] {~}

上記のようにフォームパーツのタイプごとにスタイル設定するのはCSS2時代から使えましたが、実はフォームパーツのタイプに限らず、属性値なら何でも対象にできます。

a[target=_"blank"] {~}

上記のようにすれば _blank のリンクを対象にスタイルを設定できます。

この属性セレクタはCSS3で下記のように拡張されました。

[class^="icon-"] {~}  //クラス名が「icon-」で始まる要素を対象
[src$=".png"] {~}     //srcが「.png」で終わる要素を対象
[href*="test"] {~}    //hrefに「test」を含む要素を対象

共通のクラス名を含むものや、特定の拡張子を含むものなど、あらゆる属性値を対象にできるので結構アクロバティックなこともできます。

例えば下記のようにすれば特定の画像に対して直接スタイルを設定することもできます。

[src*="filename.png"] {~}

HTMLに手を入れられない状況などで便利だったりします。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません