CSSセレクタ―一覧 CSS Selectors

CSSのレベル1～4までのセレクタ―一覧です。

基本セレクタ―

パターン	説明	CSSレベル
*	すべての要素	2
E	E要素	1
E.foo	クラス名（class要素）fooを持つE要素	1
E#foo	ID名（id要素）fooを持つE要素	1

属性セレクター

パターン	説明	CSSレベル
E[foo]	foo属性を持つE要素	2
E[foo="bar"]	foo属性の値がbarであるE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	2
E[foo~="bar"]	foo属性のスペース（空白）区切りの値で、その中の1つがbarであるE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	2
E[foo^="bar"]	foo属性の値がbarで開始するE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	3
E[foo$="bar"]	foo属性の値がbarで終了するE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	3
E[foo*="bar"]	foo属性の値にbarが含まれるE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	3
E[foo|="bar"]	foo属性のハイフン区切りの値で、barから始まるE要素 CSSレベル4からiオプションの指定が可能になり、このオプションを指定すると大文字小文字の区別なしで比較する	2

疑似クラス

パターン	説明	CSSレベル
:root	文書のルート（HTML）要素	3
E:nth-child(n) E:nth-child(an+b)	n番目の子要素であるE要素 （E要素が範囲ではない） 引数nはodd（奇数で2n+1と同じ意味）、even（偶数で2nと同じ意味）というキーワードの指定が可能 引数aはa個毎（aの倍数の要素）、引数bは範囲 aが負である場合はnth-last-childと同じ動作となる 引数aが指定され、引数bの指定がない場合は引数bは0として扱われる	3
E:nth-last-child(n) E:nth-last-child(an+b)	最後からn番目の子要素であるE要素 （E要素が範囲ではない） 引数はnth-childと同じ仕様 aが負である場合はnth-childと同じ動作となる	3
E:nth-of-type(n) E:nth-of-type(an+b)	E要素（同じ型）のn番目の子要素であるE要素 引数はnth-childと同じ仕様	3
E:nth-last-of-type(n) E:nth-last-of-type(an+b)	E要素（同じ型）の最後からn番目の子要素であるE要素 引数はnth-childと同じ仕様	3
E:nth-match(an+b of selector-list)		4
E:nth-last-match(an+b of selector-list)		4
E:first-child	最初の子要素であるE要素 （E要素が範囲ではない）	2
E:last-child	最後の子要素であるE要素 （E要素が範囲ではない）	3
E:first-of-type	E要素（同じ型）の最初の子要素であるE要素	3
E:last-of-type	E要素（同じ型）の最後の子要素であるE要素	3
E:only-child	兄弟要素が存在しない唯一のE要素 （E要素が範囲ではない）	3
E:only-of-type	E要素（同じ型）の兄弟要素が存在しない唯一のE要素	3
E:empty	空のE要素 コメントも空として扱うが、改行やインデント、全角・半角スペースなどは空として扱われない	3
E:blank	空のE要素 コメント、半角スペース、改行、インデントも空として扱う ※ Firefox実験的実装：-moz-only-whitespace	4
E:link	遷移先が未訪問であるE要素	1
E:visited	遷移先が訪問済であるE要素	1
E:active	クリック中のE要素	1
E:hover	E要素にカーソルがのったE要素	1
E:focus	フォーカスされているE要素	2
E:focus-within		4
E:target	遷移先がハッシュで参照（遷移）したE要素	3
E:any-link	E:linkとE:visitedの両方の意味を持つ擬似クラス	4
E:local-link		4
E:local-link(n)		4
E:lang(c)	lang属性の値が引数cを持つE要素	2
E:dir(d)		4
E:enabled	有効であるE要素	3
E:disabled	無効であるE要素	3
E:checked	チェックされているE要素	3
E:indeterminate	チェックが不確定状態となっているE要素	-
E:default	チェックボックスやセレクトなどで初期値が指定されているE要素	-
E:placeholder-shown	placeholder属性を持つE要素 ※ Chrome、Safari、Opera実験的実装：E::-webkit-input-placeholder ※ Firefox実験的実装：E::-moz-placeholder ※ IE実験的実装：E:-ms-input-placeholder	4
E:required	required属性を持つE要素	-
E:optional	optional属性を持つあるいはrequired属性を持たないE要素	-
E:valid	妥当性検査に成功したE要素	-
E:invalid	妥当性検査に失敗した（エラーとなった）E要素	-
E:user-invalid		4
E:user-error		4
E:in-range	数値が指定範囲内であるE要素	-
E:out-of-range	数値が指定範囲外（エラー）であるE要素	-
E:read-only	readonly属性を持つE要素 ※ Firefox実験的実装：E:-moz-read-only	4
E:read-write	編集可能なE要素 ※ Firefox実験的実装：E:-moz-read-write	4
E:not(s)	引数sのセレクタ―に一致しないE要素	3
E:not(s, s...)	E:not(s)の引数sが複数指定できるパターン	4
E:matches(s[, s...])	引数sであるE要素 ※ Chrome、Safari、Opera実験的実装：E:-webkit-any(s[, s...]) ※ Firefox実験的実装：E:-moz-any(s[, s...])	4
E:current(s[, s...])		4
E:past(s[, s...])		4
E:future(s[, s...])		4
E:has(s[, s...])	引数sの子孫要素を持っているE要素	4
E:drop E:drop(k)		4
E:column(s)		4
E:nth-column(an+b)		4
E:nth-last-column(an+b)		4
E::backdrop		-
E:fullscreen		-

疑似要素

パターン	説明	CSSレベル
E::first-line	E要素の最初の一行 br要素などの改行や自動の折り返しで、折り返されたものは一行として含まれない	1
E::first-letter	E要素の最初の一文字	1
E::selection	E要素内で選択された要素（文字や画像などを含む）	3
E::before	E要素の最初の子要素として生成するコンテンツ要素 CSSレベル2ではコロンが1つ、CSSレベル3からはコロンが2つとなることに注意	2
E::after	E要素の最後の子要素として生成するコンテンツ要素 CSSレベル2ではコロンが1つ、CSSレベル3からはコロンが2つとなることに注意	2
E::marker	E要素をulやol要素と同等に扱う ulやol要素のみで使用可能なプロパティが使用可能となる	-

その他セレクター

パターン	説明	CSSレベル
E F	E要素の子孫要素であるF要素	1
E >> F	E Fと同じ仕様（こちらは明確な指定）	4
E > F	E要素の子要素であるF要素	2
E + F	E要素の直後の兄弟要素であるE要素	2
E ~ F	E要素の後（以降）の兄弟要素であるE要素	3
?E F	子孫要素であるF要素の先祖E要素	4

IE独自

パターン	説明	CSSレベル
E::-ms-expand	select要素の初期状態にあるE要素	-
E::-ms-clear	バツ（入力内容のクリア）ボタンがあるE要素	-
E::-ms-reveal	type属性がpasswordで目マークのE要素	-