CSS3入門道場

セレクター

この章では、CSS3で新たに登場したセレクターについて見て行きます。CSS2.1以前のセレクターも復習&比較の為に登場しますが、予めご了承下さい。なお、執筆時点では、Selectors Level 4も仕様策定作業が進んでいますが、Level 4については本書の対象外となります。

メニュー

参考リンク

ブラウザサポート

本章で紹介するCSS3は、どのブラウザでもサポートしています。

参照:Can I use
CSS3 selectors

属性セレクター

要素の属性を元に選択するセレクターです。通常は、要素名やクラス名に続けて書くことが多いですが、単独での使用でも大丈夫です。((CSS3)と記載があるのが、CSS3での登場です)

[属性名]

ある特定の属性名を含む要素を絞り込みます。

この場合、title属性を持つimg要素全てが対象になります。

[属性名 = 値]

値と完全一致した属性を持つ要素を絞り込みます。

上記は、target属性が_blankのリンクが対象になります。

[属性名 *= 値]  (CSS3)

値と部分一致した属性を持つ要素を絞り込みます。

このセレクターの場合、上記のinput全てが対象になるのでご注意下さい。 (もし単語ベースでの一致にする場合は、この次のセレクターを使います)

[属性名 ~= 値]

上記の *= と少し似ていますが、こちらは、スペースで区切られた単語ベースでの一致判定となります。

この場合は、1つ目と4つ目のinputが対象になります。

Copyright 2015 CSS3入門道場 All Rights Reserved.