気の向くままに辿るIT/ICT/IoT
CSS / Cascading Style Sheets / セレクタ

CSS2(CSS 2.0 / CSS 2.1) selector / セレクタ

ホーム前へ次へ
CSS セレクタとは?

CSS2(CSS 2.0 / CSS 2.1) selector / セレクタ

CSS2 (CSS 2.0 / CSS 2.1) selector / セレクタ

 CSS2(CSS 2.0/CSS 2.1)におけるセレクタ構文の概要は以下の通りです。

パターン初期
ver
意味W3C参照URI
*CSS2何らかの要素とマッチUniversal selector
ECSS1要素 E とマッチType selectors
E FCSS1E 要素の子孫要素である F 要素とマッチDescendant selectors
E > FCSS2要素 E の子要素である F 要素とマッチChild selectors
E + FCSS2並列関係・隣接する(きょうだい)要素 E の直後にある F 要素とマッチAdjacent selectors
E[foo]CSS2(何らかの値を)設定済みの"foo"属性を伴う E 要素とマッチAttribute selectors
E[foo="warning"]CSS2"warning"と完全に等価である"foo"属性値を持つ E 要素とマッチAttribute selectors
E[foo?="warning"]CSS2スペース区切りで列挙された値の中の1つとしてある"warning"と完全に等価であるものが含まれる"foo"属性値を持つ E 要素とマッチAttribute selectors
E[lang|="en"]CSS2"en"を伴って(左から)始まるハイフン区切りの値のリストを持つ"lang"属性のある E 要素とマッチAttribute selectors
E.warningCSS1マークアップ言語のclass属性値が"warning"である E 要素とマッチ
classセレクタ/(マークアップ)言語仕様
(E[class?="warning"] と等価)
Class selectors
E#myidCSS1マークアップ言語のid属性値が"myid"である E 要素とマッチID selectors

 このようにCSS1のセレクタに加え、CSS2のセレクタにおいては、アスタリスク記号、HTML要素/XHTML要素における特定の属性や属性値を持つ要素といったパターンマッチによるスタイルプロパティの適用、ネストした要素における特定の階層においてマークアップ階層構造上の子要素を指定可能な右アングルブラケットによるスタイルプロパティの適用、同じくネストした階層において子要素ではない直後に隣接する要素を指定可能なプラス記号によるスタイルプロパティの適用が可能となっており、7つのセレクタが追加定義されています。

 尚、CSS1で定義されていたものの非推奨となっていたカンマ区切りによる複数要素へのスタイルプロパティ同時適用についてはCSS2では定義されていない為、CSS1セレクタ5種の内4種が継承され、CSS2では計11種のセレクタが定義されています。

CSSセレクタとは : CSS1セレクタ > CSS2セレクタ > CSS3セレクタ

より関連性の高いスタイル設定

CSS擬似クラス / CSS擬似要素

CSS/スタイルシート情報

ホーム前へ次へ