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要素 -