CSSセレクタって草案も含めると現在65パターンあるそうです。（2018年11月時点）
ついつい忘れたり曖昧に覚えているものも多いです。
今回は、そんなCSSセレクタを改めて確認し、さらに独断で 基本レベル 、 実務レベル 、 チョットデキルレベル 、 W3Cの人レベル の4段階に分類しました。
個人的に重要と思ったセレクタには要所々々でサンプルコードを付けたのでお役立てください。
ブラウザの実装がまちまちなものはCan I useのリンクも掲載しました。
基本レベル 14パターン
普段マークアップをしないサーバーサイドエンジニアやデザイナーも知ってたりするレベル。
全称セレクタ
| No. | パターン | 選択対照 |
|---|---|---|
| 1 | * | すべての要素 |
型セレクタ
| No. | パターン | 選択対照 |
|---|---|---|
| 2 | E | 任意のE（HTMLタグ）要素 |
IDセレクタ
| No. | パターン | 選択対照 |
|---|---|---|
| 3 | E#myid | ID名がmyidであるE要素 |
classセレクタ
| No. | パターン | 選択対照 |
|---|---|---|
| 4 | E.warning | クラス名がwarningであるE要素 |
疑似クラス
| No. | パターン | 選択対照 |
|---|---|---|
| 5 | E:link | リンク先が未訪問のE要素（アンカータグ） |
| 6 | E:visited | リンク先が訪問済みのE要素（アンカータグ） |
| 7 | E:active | ユーザーの操作が行なわれているE要素 |
| 8 | E:hover | カーソルが当たっている要素、またはその要素を子孫に持つE要素 |
| 9 | E:focus | フォーカスされているE要素 |
:link :visited :active :hover の違い
See the Pen CSS Selectors #1 by Takaaki Sato (@taquaki) on CodePen.
属性値セレクタ
| No. | パターン | 選択対照 |
|---|---|---|
| 10 | E[foo] | foo属性をもつE要素 |
| 11 | E[foo="bar"] | foo属性の値がbarであるE要素 |
結合子
| No. | パターン | 選択対照 |
|---|---|---|
| 12 | E F | E要素の子孫であるF要素 |
| 13 | E > F | E要素の直下の子であるF要素 |
| 14 | E + F | 兄弟関係の中でE要素の直後にあるF要素 |
実務レベル 22パターン
主なブラウザは実装済み。ここまで把握していたら業務で困ることは少ないのでは。というレベル。
疑似クラス
| No. | パターン | 選択対照 |
|---|---|---|
| 15 | E:not(s1, s2, …) | s1、s2、…のどれにもあてはまらないE要素 |
| 16 | E:enabled E:disabled |
操作が可能または不可能になっているE型のUI要素 |
| 17 | E:checked | 選択されているE型のUI要素 |
| 18 | E:nth-child(n [of S]?) | 兄弟要素の中でSに合致するn個目のE要素 |
| 19 | E:nth-last-child(n [of S]?) | 兄弟要素の中でSに合致する最後からn個目のE要素 |
| 20 | E:first-child | 兄弟要素の中で最初のE要素 |
| 21 | E:last-child | 兄弟要素の中で最後のE要素 |
| 22 | E:only-child | 自身の他に兄弟要素がないE要素 |
| 23 | E:nth-of-type(n) | 同じ親をもつE要素の中でn個目のもの |
| 24 | E:nth-last-of-type(n) | 同じ親をもつE要素の中で最後からn個目のもの |
| 25 | E:first-of-type | 同じ親をもつE要素の中で最初のもの |
| 26 | E:last-of-type | 同じ親をもつE要素の中で最後のもの |
| 27 | E:only-of-type | 同じ親をもつE要素が自身の他にないもの |
| 28 | E:root | ドキュメントルートであるE要素（html要素） |
| 29 | E:empty | 空白も含めた子をもたないE要素 |
| 30 | E:target | ターゲット（アンカーリンク）先のE要素 |
:nth-child と :nth-of-type の違い
See the Pen CSS Selectors #2 by Takaaki Sato (@taquaki) on CodePen.
奥が深い :empty
See the Pen CSS Selectors #4 by Takaaki Sato (@taquaki) on CodePen.
属性値セレクタ
| No. | パターン | 選択対照 |
|---|---|---|
| 31 | E[foo^="bar"] | foo属性の値がbarで始まるE要素 |
| 32 | E[foo$="bar"] | foo属性の値がbarで終わるE要素 |
| 33 | E[foo*="bar"] | foo属性の値がbarを含むE要素 |
| 34 | E[foo~="bar"] | foo属性の値を空白で分割したときにいずれかがbarと一致するE要素 |
| 35 | E[foo｜="en"] ※ | foo属性の値をハイフンで分割したときに最初がenと一致するE要素 |
※ なぜか|（パイプ）がバックスラッシュでエスケープされなかったので全角で書いてます。
E[foo*="bar"] と E[foo~="bar"] と E[foo|="en"]
See the Pen CSS Selectors #3 by Takaaki Sato (@taquaki) on CodePen.
結合子
| No. | パターン | 選択対照 |
|---|---|---|
| 36 | E ~ F | 兄弟要素の中でE要素に続いているF要素 |
チョットデキルレベル 13パターン
Selectors Level 4で定義されている新しいセレクタたち。一部のブラウザ（IE）で未実装なものも多い。
これを知っていたらチョットデキルTシャツを着るレベル。
疑似クラス
| No. | パターン | 選択対照 | Can I use |
|---|---|---|---|
| 37 | E:is(s1, s2, …) | s1、s2、…のどれかにマッチするE要素 | Link |
| 38 | E:dir(ltr) | 文章が左から右に書かれるのE要素 | Link |
| 39 | E:read-write E:read-only |
ユーザーが編集可能（不可能）なE型のUI要素 | Link |
| 40 | E:placeholder-shown | プレイスホルダーが表示されているE型のUI要素 | Link |
| 41 | E:default | デフォルト選択されているE型のUI要素 | Link |
| 42 | E:indeterminate | 選択が未定の状態にあるE型のUI要素 | Link |
| 43 | E:valid E:invalid |
入力された値が適切（不適切）であるE型のUI要素 | - |
| 44 | E:in-range E:out-of-range |
入力された値が範囲内（外）であるE型のUI要素 | Link |
| 45 | E:required E:optional |
入力が必須（任意）であるE型のUI要素 | Link |
| 46 | E:lang(zh, "*-hant") | 指定した言語（例は中国語）であるE要素 | Link |
| 47 | E:focus-within | フォーカスされている、もしくはそれを含んでいるE要素 | Link |
| 48 | E:focus-visible | フォーカスされておりフォーカスリング表示すべきと判断されたE要素 | Link |
:default と :indeterminate
indeterminateはJSとの合わせ技が必要
See the Pen CSS Selectors #5 by Takaaki Sato (@taquaki) on CodePen.
属性値セレクタ
| No. | パターン | 選択対照 | Can I use |
|---|---|---|---|
| 49 | E[foo="bar" i] | foo属性の値がbar（大文字小文字を無視）であるE要素 | Link |
W3Cの人レベル 16パターン
将来ブラウザに実装予定のセレクタ。
なので仕様が変わる可能性大。これを知っているあなたはもしかしてW3Cの人なのでは。
疑似クラス
| No. | パターン | 選択対照 |
|---|---|---|
| 50 | E:where(s1, s2, …) | s1、s2、…のどれかにマッチするE要素かつ詳細度に影響しない |
| 51 | E:has(rs1, rs2, …) | E要素内でrs1、rs2、…のどれかにマッチする要素 |
| 52 | E:any-link | リンクである（href属性をもつ）E要素 |
| 53 | E:local-link | 現在のページのURLをターゲット（アンカーリンク）にしている（href属性をもつ）E要素 |
| 54 | E:target-within | ターゲット（アンカーリンク）先、またはそれを含むE要素 |
| 55 | E:scope | :scope要素であるE要素（現在の仕様では:rootと等価） |
| 56 | E:current | 映像などの何らかのタイムラインの中で現在表示中である、またはそれを含むE要素 |
| 57 | E:current(s) | :current要素であり、SであるE要素 |
| 58 | E:past | 映像などの何らかのタイムラインの中で過去に表示したE要素 |
| 59 | E:future | 映像などの何らかのタイムラインの中で未来に表示するE要素 |
| 60 | E:blank | 値が空欄であるE型のUI要素 |
| 61 | E:user-invalid | ユーザーが入力中に入力された値が適切ではないと判断されたE型のUI要素 |
| 62 | E:nth-col(n) | 表などにおいてn個目のカラムに属するセルであるE要素 |
| 63 | E:nth-last-col(n) | 表などにおいて最後からn個目のカラムに属するセルであるE要素 |
属性値セレクタ
| No. | パターン | 選択対照 |
|---|---|---|
| 64 | E[foo="bar" s] | foo属性の値がbar（大文字小文字を無視しない）であるE要素 |
結合子
| No. | パターン | 選択対照 |
|---|---|---|
| 65 | F ｜｜ E ※ | 表などにおいてF要素のカラムに属するセルであるE要素 |
※ なぜか|（パイプ）がバックスラッシュでエスケープされなかったので全角で書いてます。
以上です！