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
E	CSS1	要素 E とマッチ	Type selectors
E F	CSS1	E 要素の子孫要素である F 要素とマッチ	Descendant selectors
E > F	CSS2	要素 E の子要素である F 要素とマッチ	Child selectors
E + F	CSS2	並列関係・隣接する(きょうだい)要素 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.warning	CSS1	マークアップ言語のclass属性値が"warning"である E 要素とマッチ classセレクタ／(マークアップ)言語仕様 (E[class?="warning"] と等価)	Class selectors
E#myid	CSS1	マークアップ言語のid属性値が"myid"である E 要素とマッチ	ID selectors

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

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

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

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

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

CSS/スタイルシート情報

関連リンク

• メインメニュー
• ホームページ作成メニュー
• ウェブ開発メニュー