CSS3 selector / セレクタ

CSS3 selector / セレクタ

　CSS3 selector / セレクタ構文の概要は以下の通りです。

パターン	初期 ver	意味	W3C参照URI
*	CSS2	何らかの要素	Universal selector
E	CSS1	Eという種類の要素	Type selector
E[foo]	CSS2	"foo"属性を持つ E 要素	Attributeselectors
E[foo="bar"]	CSS2	"bar"と完全に一致する"foo"属性を持つ E 要素
E[foo?="bar"]	CSS2	値が"bar"と完全に一致する値を持つ空白区切りのリストである"foo"属性を持つ
E[foo^="bar"]	CSS3	文字"bar"で始まる"foo"属性値を持つ E 要素
E[foo$="bar"]	CSS3	文字"bar"で終わる"foo"属性値を持つ E 要素
E[foo*="bar"]	CSS3	部分文字列として"bar"を含む"foo"属性値を持つ E 要素
E[foo|="en"]	CSS2	"en"で(左から)始まるハイフン区切りの値リストを持つ"foo"属性値のある E 要素
E.warning	CSS1	マークアップ言語のclass属性値が"warning"である E 要素	Class selectors
E#myid	CSS1	マークアップ言語のid属性値が"myid"である E 要素	ID selectors
E F	CSS1	E 要素の子孫要素である F 要素	Descendantcombinator
E > F	CSS2	E 要素の子要素である F 要素	Child combinator
E + F	CSS2	直前が E 要素である F 要素	Adjacentsibling combinator
E ? F	CSS3	E 要素が先行する F 要素(E要素に後続するF要素)	Generalsibling combinator

　このように(CSS1から集約された)CSS2のセレクタ11種に加え、CSS3のセレクタにおいては、HTML要素/XHTML要素における特定の属性や属性値の中でも特定の文字列で始まる、終わる、特定文字を含むといった部分文字列によるパターンマッチによるスタイルプロパティの適用、ネストしていない(子要素でない)要素において"tilde"(U+007E, ?)・チルド・チルダの左辺の要素の後の(直後に隣接する必要ない)どこかに右辺の要素があるパターンへのスタイルプロパティの適用といった4つのセレクタが追加定義され、計15のセレクタが定義されています。

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

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

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

CSS/スタイルシート情報

関連リンク

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