セレクタ名、セレクタの構文、詳細度、セレクタの説明を表組みにしてまとめています。
セレクタの構文には以下のようにして構文の例を示しています。
- 要素セレクタ
E, F - クラスセレクタ
.foo, .bar - IDセレクタ
#foo, #bar - 属性セレクタ
[attr="value"]
詳細度には括弧で囲んでいるものと囲んでいないものがあります。
括弧で囲んでいるものはSpecificity Calculatorでセレクタ構文の詳細度を調べた結果です。例えばE Fは(0, 0, 0, 2)となります。
括弧で囲んでいないものは特定のセレクタ自身の詳細度です。例えばE > Fの場合はEとFは要素セレクタなので詳細度は合計すると(0, 0, 0, 2)となりますが、>自身は詳細度を上げることはないので0, 0, 0, 0となっています。
なるべく詳細度のいちばん低い構文やセレクタを残すようにしていますが、セレクタによっては詳細度が変わる可能性があるので、あくまで目安として考えてください。
シングルセレクタを中心とした基本的なセレクタです。
| セレクタ名 | 構文 | 詳細度 | 説明 |
|---|---|---|---|
| 全称セレクタ | * |
(0, 0, 0, 0) | すべての要素 |
| 要素セレクタ | E |
(0, 0, 0, 1) | E要素 |
| 構造擬似クラス | :root |
(0, 0, 1, 0) | 文書のルート要素（HTML文書ではhtml要素）にマッチ |
| クラスセレクタ | .foo |
(0, 0, 1, 0) | class属性がfooの要素 |
| 属性セレクタ | [attr] |
(0, 0, 1, 0) | attr属性をもつ要素 |
| 属性セレクタ | [attr="value"] |
(0, 0, 1, 0) | attr属性の値がvalueである要素 |
| IDセレクタ | #foo |
(0, 1, 0, 0) | id属性がfooの要素 |
セレクタを絞り込むための条件をもったセレクタです。例えば、直接の子要素やx番目の要素、マウスオーバーしている状態などです。
主要なブラウザに対応していないセレクタは除外しています。また、nth-childなどはnth-of-typeのほうを優先的に使用したほうがいいため除外しています。
| セレクタ名 | 構文 | 詳細度 | 説明 |
|---|---|---|---|
| 結合子（子孫セレクタ） | E F |
0, 0, 0, 0 (0, 0, 0, 2) | E要素の子孫要素であるすべてのF要素 |
| 結合子（子セレクタ） | E > F |
0, 0, 0, 0 (0, 0, 0, 2) | E要素の直接の子要素であるすべてのF要素 |
| 結合子（隣接セレクタ、隣接兄弟セレクタ） | E + F |
0, 0, 0, 0 (0, 0, 0, 2) | E要素の直後にあらわれるF要素 |
| 結合子（間接セレクタ、一般兄弟セレクタ） | E ~ F |
0, 0, 0, 0 (0, 0, 0, 2) | E要素の後にあらわれるF要素 |
| 否定擬似クラス | E:not(x) |
0, 0, 0, 0 (0, 0, 0, 2) | xにマッチしないE要素 |
| 擬似要素 | E::first-line |
0, 0, 0, 1 (0, 0, 0, 2) | E要素の実際に表示されている最初の行 |
| 擬似要素 | E::first-letter |
0, 0, 0, 1 (0, 0, 0, 2) | E要素の最初の文字（contentプロパティを指定している::before擬似要素が生成される場合は生成される要素に適応される） |
| 擬似要素 | E::before |
0, 0, 0, 1 (0, 0, 0, 2) | 要素の前に最初の子要素となるインラインの擬似要素を生成する |
| 擬似要素 | E::after |
0, 0, 0, 1 (0, 0, 0, 2) | E要素の後に最後の子要素となるインラインの擬似要素を生成する |
| 属性セレクタ | [attr^="value"] |
0, 0, 1, 0 (0, 0, 1, 0) | attr属性の値がvalueで始まる（前方一致）要素 |
| 属性セレクタ | [attr$="value"] |
0, 0, 1, 0 (0, 0, 1, 0) | attr属性の値がvalueで終わる（後方一致）要素 |
| 属性セレクタ | [attr*="value"] |
0, 0, 1, 0 (0, 0, 1, 0) | attr属性の値がvalueを含む（部分一致）要素 |
| 属性セレクタ | [attr~="value"] |
0, 0, 1, 0 (0, 0, 1, 0) | attr属性の値がスペースで区切られた項目リストであり、値がvalueである要素 |
| 属性セレクタ | `[attr | ="value"]` | 0, 0, 1, 0 (0, 0, 1, 0) |
| 言語疑似クラス | E:lang(C) |
0, 0, 1, 0 (0, 0, 1, 1) | 言語情報CをもつE要素 |
| 構造擬似クラス | E:first-of-type |
0, 0, 1, 0 (0, 0, 1, 1) | 同じ型をもつ最初のE要素 |
| 構造擬似クラス | E:last-of-type |
0, 0, 1, 0 (0, 0, 1, 1) | 同じ型をもつ最後のE要素 |
| 構造擬似クラス | E:nth-of-type(x) |
0, 0, 1, 0 (0, 0, 1, 1) | 同じ型をもつx番目のE要素 |
| 構造擬似クラス | E:nth-of-type(odd) |
0, 0, 1, 0 (0, 0, 1, 1) | 同じ型をもつ奇数番目のE要素 |
| 構造擬似クラス | E:nth-of-type(even) |
0, 0, 1, 0 (0, 0, 1, 1) | 同じ型をもつ偶数番目のE要素 |
| 構造擬似クラス | E:nth-of-type(-n+x) |
0, 0, 1, 0 (0, 0, 1, 1) | 同じ型をもつ最初のx番目のE要素 |
| 構造擬似クラス | E:nth-of-type(n+2) |
0, 0, 1, 0 (0, 0, 1, 1) | 同じ型をもつ最初のE要素以外 |
| 構造擬似クラス | E:nth-last-of-type(x) |
0, 0, 1, 0 (0, 0, 1, 1) | 同じ型をもつ最初から数えてx番目のE要素 |
| 構造擬似クラス | E:empty |
0, 0, 1, 0 (0, 0, 1, 1) | 子要素や文字（スペースも含）をもたない空の要素（コメント構文は判定されない） |
| ロケーション疑似クラス | E:link |
0, 0, 1, 0 (0, 0, 1, 1) | E要素内のすべてのリンク |
| ロケーション疑似クラス | E:visited |
0, 0, 1, 0 (0, 0, 1, 1) | E要素内の訪問済みのリンク |
| ロケーション疑似クラス | E:target |
0, 0, 1, 0 (0, 0, 1, 1) | ハッシュ（#）が指定されているURLが参照した識別子と一致するid属性をもつ唯一の要素 |
| ユーザーアクション擬似クラス | E:hover |
0, 0, 1, 0 (0, 0, 1, 1) | マウスオーバーしたE要素 |
| ユーザーアクション擬似クラス | E:active |
0, 0, 1, 0 (0, 0, 1, 1) | マウスを押して離すまでの間か、タブキーでフォーカスしたE要素 |
| ユーザーアクション擬似クラス | E:focus |
0, 0, 1, 0 (0, 0, 1, 1) | キーボードで選択するか、マウスでアクティベート（フォームの入力など）をしたE要素 |
| インプット疑似クラス | E:enabled |
0, 0, 1, 0 (0, 0, 1, 1) | disabled属性が指定されていない使用可能なE要素 |
| インプット疑似クラス | E:disabled |
0, 0, 1, 0 (0, 0, 1, 1) | disabled属性が指定されている使用不可能なE要素 |
| インプット疑似クラス | E:checked |
0, 0, 1, 0 (0, 0, 1, 1) | チェックかon状態にされているE要素（ラジオ、チェックボックス、オプションボタン） |
| インプット疑似クラス | E:required |
0, 0, 1, 0 (0, 0, 1, 1) | required属性を指定しているE要素 |
| インプット疑似クラス | E:optional |
0, 0, 1, 0 (0, 0, 1, 1) | required属性が指定されていないinput要素 |
| インプット疑似クラス | E:valid |
0, 0, 1, 0 (0, 0, 1, 1) | type属性にしたがってバリデーションが正しくおこなわれたinput要素 |
| クラスセレクタ | E.foo |
0, 0, 1, 1 (0, 0, 1, 1) | class属性がfooのE要素 |
| 属性セレクタ | E[attr="value"] |
0, 0, 1, 1 (0, 0, 1, 1) | attr属性の値がvalueであるE要素 |
詳細度とはセレクタのもつ重みのことで、詳細度が高いほど優先して適応されます。
詳細度は以下のようにつけられます。詳細度はセレクタごとに決められた数値を足していくことで計算できます。
- 0, 0, 0, 0 - 全称セレクタ、結合子、
:not()疑似クラス - 0, 0, 0, 1 - 要素セレクタ
- 0, 0, 1, 0 - クラスセレクタ、属性セレクタ、疑似要素
- 0, 1, 0, 0 - IDセレクタ、
:not()以外の疑似クラス - 1, 0, 0, 0 - スタイル属性（インラインスタイル）
詳細度は左から判定されます。例えばIDセレクタ(0,1,0,0)を指定していないクラスセレクタ(0,0,1,0)は何個同時に指定しても(0,0,3,0)IDセレクタを上書きすることはできません。
!importantは詳細度とは別の基準になります。!importantを指定したセレクタは詳細度に関係なく優先して適応されます。!importantを指定したセレクタ同士で詳細度を比べて（継承とカスケードも適応されたうえで）最終的な優先度が決まります。
属性と属性値によって要素を選択します。属性だけでも、属性と属性値の両方を指定しても詳細度は0,0,1,0で変わりません。一般的には要素セレクタと同時に指定します。要素セレクタをともなう場合は要素セレクタの詳細度の0, 0, 0, 1が足されて(0, 0, 1, 1)になります。
結合子は2つ以上のセレクタの関係をもとに、セレクタを限定的にします。結合子自信の詳細度は0,0,0,0です。要素セレクタを2つ指定すると(0, 0, 0, 2)になり、クラスセレクタを2つ指定すると(0, 0, 2, 0)になります。
引数を渡す関数記法で、引数にマッチしない要素に適応されます。否定擬似クラス自信の詳細度は0,0,0,0,です。引数には他の否定セレクタや擬似要素を渡すことはできません。