N
nob@lit-forge
CSS セレクタ 早見表
要素・クラス・ID・属性・擬似クラス・擬似要素・結合子など、CSS セレクタの全種類を用途別に整理した早見表。特異性（specificity）の計算方法と、セレクタを書くときの優先順位ルールも解説。
#CSS#セレクタ#Web
基本セレクタ
| セレクタ | 意味 |
|---|---|
| * | 全要素 |
| div | 要素セレクタ（タグ名） |
| .class | クラスセレクタ |
| #id | ID セレクタ |
| [attr] | 属性セレクタ（属性があれば） |
| [attr="val"] | 属性値の完全一致 |
| [attr^="v"] | 属性値が v で始まる |
| [attr$="v"] | 属性値が v で終わる |
| [attr*="v"] | 属性値に v を含む |
結合子（コンビネータ）
| セレクタ | 意味 |
|---|---|
| A B | A の子孫の B（スペース） |
| A > B | A の直下の B |
| A + B | A の直後の B（兄弟） |
| A ~ B | A より後にある B（兄弟、複数） |
| A, B | A または B（グループ化） |
擬似クラス（状態）
| セレクタ | 意味 |
|---|---|
| :hover | ホバー中 |
| :focus | フォーカス中 |
| :focus-visible | キーボードフォーカス（マウスクリック時は発火しない） |
| :active | 押下中 |
| :checked | チェック済の input |
| :disabled / :enabled | 無効 / 有効 |
| :required / :optional | 必須 / 任意 |
| :valid / :invalid | バリデーション結果 |
| :placeholder-shown | placeholder が表示されている入力欄（未入力） |
擬似クラス（位置）
| セレクタ | 意味 |
|---|---|
| :first-child / :last-child | 親の最初 / 最後の子 |
| :nth-child(n) | n 番目の子（1 始まり） |
| :nth-child(2n) | 偶数番目 |
| :nth-child(odd) | 奇数番目 |
| :only-child | 子が 1 つだけの時 |
| :first-of-type / :last-of-type | 同じ要素型の中で最初 / 最後 |
| :empty | 子も空白も無い要素 |
| :not(selector) | セレクタに一致しない |
| :is(a, b) | 複数セレクタに一致（特異性は最大のものに準じる） |
| :where(a, b) | :is と同じだが特異性は 0 |
| :has(selector) | セレクタを子孫に持つ要素（親セレクタ相当） |
擬似要素
| セレクタ | 意味 |
|---|---|
| ::before | 要素の前に content で生成 |
| ::after | 要素の後に content で生成 |
| ::first-letter | 先頭 1 文字 |
| ::first-line | 先頭 1 行 |
| ::selection | 選択中テキスト |
| ::placeholder | 入力欄の placeholder |
| ::marker | リストのマーカー |
特異性（specificity）の計算
セレクタごとに (A, B, C, D) の 4 数値で評価される（左ほど強い）:
- A: インラインスタイル（
style=""）があれば 1 - B: ID セレクタの数
- C: クラス / 擬似クラス / 属性セレクタの数
- D: 要素セレクタ / 擬似要素の数
例:
div→ (0,0,0,1).btn→ (0,0,1,0)#main .btn→ (0,1,1,0)!importantは最優先（仕組みとしてはそのスコアに勝つ別系）
ハマりどころ
- :has() の対応ブラウザ: 2023 以降の主要ブラウザはサポート。古い Safari は不可
- :nth-child vs :nth-of-type: nth-child は全兄弟で数える、nth-of-type は同じ要素型の中だけ
- 特異性が同じ場合: CSS 宣言の順序で後のものが勝つ
- :where の活用: リセット CSS など「後で上書きされる前提」のスタイルは :where でラップすると詳細度 0 になり、扱いやすい
- !important の乱用禁止: 初めから設計を見直したほうが早いことがほとんど