フロントエンドエンジニアが覚えておくべきCSSのセレクタと関連技術をまとめます。以下のリストには、基本セレクタ、疑似クラス、疑似要素、属性セレクタ、関係セレクタ、および複雑なセレクタを含みます。

Aタイプ、Bタイプで作ってみました。お好きな方をどうぞ。

CSSセレクタ完全リスト

1. 基本セレクタ

セレクタ	説明	例
要素セレクタ	特定のHTML要素を選択	`p { color: red; }`
クラスセレクタ	クラス属性を持つ要素を選択	`.button { color: blue; }`
IDセレクタ	ID属性を持つ要素を選択	`#header { font-size: 18px; }`
ユニバーサルセレクタ	すべての要素を選択	`* { margin: 0; }`

2. 関係性セレクタ

セレクタ	説明	例
子孫セレクタ	親要素内のすべての子孫要素を選択	`div p { color: green; }`
子セレクタ（`>`）	直下の子要素のみを選択	`div > p { font-size: 14px; }`
隣接兄弟セレクタ	隣接する兄弟要素を選択	`h2 + p { margin-top: 0; }`
一般兄弟セレクタ	同じ親要素内の兄弟要素を選択	`h2 ~ p { color: gray; }`

3. 属性セレクタ

セレクタ	説明	例
属性が一致する要素	特定の属性を持つ要素を選択	`input[type="text"] { ... }`
*部分一致（`=`）**	属性値が部分的に一致する要素を選択	`a[href*="example"] { ... }`
前方一致（`^=`）	属性値が前方一致する要素を選択	`img[src^="images/"] { ... }`
後方一致（`$=`）	属性値が後方一致する要素を選択	`img[src$=".png"] { ... }`
属性値の存在（`~=`）	属性値が単語として含まれる要素を選択	`[class~="button"] { ... }`

4. 疑似クラス

セレクタ	説明	例
:hover	ホバー状態の要素を選択	`a:hover { color: red; }`
:active	クリック中の要素を選択	`button:active { background: gray; }`
:focus	フォーカスされた要素を選択	`input:focus { outline: blue; }`
:first-child	親要素の最初の子要素を選択	`li:first-child { font-weight: bold; }`
:last-child	親要素の最後の子要素を選択	`li:last-child { color: red; }`
:nth-child()	特定の順番の子要素を選択	`li:nth-child(2) { color: green; }`
:nth-of-type()	特定のタイプの順番要素を選択	`p:nth-of-type(1) { font-size: 20px; }`
:not()	特定の要素以外を選択	`p:not(.highlight) { color: gray; }`
:empty	空の要素を選択	`div:empty { border: 1px dashed red; }`
:has()	親要素が特定の子要素を持つか判定	`.card:has(p)`
:is()	複数のセレクター指定（`OR` 条件）	`:is(h1, h2, h3)`
:where()	優先度ゼロのセレクター	`:where(h1, h2)`

5. 疑似要素

セレクタ	説明	例
::before	要素の前にコンテンツを挿入	`p::before { content: "●"; color: red; }`
::after	要素の後にコンテンツを挿入	`p::after { content: "★"; }`
::first-line	最初の行にスタイルを適用	`p::first-line { font-weight: bold; }`
::first-letter	最初の文字にスタイルを適用	`p::first-letter { font-size: 2em; }`

6. 高度なセレクタ

セレクタ	説明	例
複数セレクタ	複数の要素をまとめて選択	`h1, h2, h3 { color: navy; }`
結合セレクタ	条件に合致する要素の絞り込み	`div.highlight p { font-size: 14px; }`
詳細度の調整	!importantでスタイルの優先順位を変更	`p { color: red !important; }`

7. 便利なショートハンドと特殊セレクタ

セレクタ	説明	例
:checked	チェックボックスのチェック状態を選択	`input:checked { box-shadow: 0 0 5px blue; }`
:required	必須項目のスタイル適用	`input:required { border: 2px solid red; }`
:disabled	非活性状態の要素を選択	`button:disabled { opacity: 0.5; }`
:root	ルート要素（`html`）を選択	`:root { --main-color: blue; }`
::selection	選択したテキストのスタイルを適用	`::selection { background: yellow; }`

8. メディアクエリとレスポンシブ

セレクタ・ルール	説明	例
メディアクエリ	画面サイズに応じたスタイル適用	`@media (max-width: 768px) { ... }`
`min-width`条件	最小幅の条件指定	`@media (min-width: 1024px) { ... }`
`orientation`（向き）	画面の向きによってスタイル変更	`@media (orientation: portrait) { ... }`

9. :root（カスタムプロパティ）

セレクタ・ルール	説明	例
`:root`	CSS変数を定義する	`:root { --main-color: #3498db; }`
`var(--変数名)`	変数を適用する	`color: var(--main-color);`

📌 `:root` の活用例

1. 基本的なCSS変数の定義と適用

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 16px;
}

body {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
}

まとめ

このリストに含まれるCSSセレクタは、フロントエンドエンジニアが日常的に使うものや、応用的に必要なものを網羅しています。各セレクタの動きを理解し、組み合わせることで、複雑なデザイン要件にも対応できるようになります。

「練習ツールはこちら」

実務Tips（ベストプラクティス集）

セレクタをシンプルに保つ

複雑なセレクタを多用すると可読性が下がり、保守性も悪くなります。できるだけ短く、分かりやすいクラス名を使うのが基本です。

クラスを中心に設計する

IDや要素セレクタだけに頼らず、クラスを基本としたスタイル設計にすることで、再利用性が高まり、フレームワークやBEM記法との相性も良くなります。

セレクタの優先順位を意識する

スタイルが当たらないときは「セレクタの優先順位（Specificity）」を確認しましょう。強いセレクタを重ねるより、構造を整理して意図通りに反映させる方が長期的に管理しやすくなります。

開発ツールで確認する

ブラウザのDevToolsを使えば、どのセレクタが適用されているか一目で確認できます。スタイルが崩れたときは、まずここでデバッグするのが実務では定番です。

チームで使う命名規則を決める

BEM、FLOCSSなど、セレクタの命名ルールをチームで統一すると、スタイルシート全体が読みやすくなり、後からの修正もスムーズになります。

よくある質問

Q. CSSセレクタを効率よく覚える方法は？

A. 実際に手を動かして使いながら覚えるのが一番効果的です。ブラウザの開発者ツールで試したり、小さなサンプルコードを作って確認すると定着が早まります。

Q. 子孫セレクタと子要素セレクタの違いは何ですか？

A. 子孫セレクタ（スペース）は階層下すべてに適用され、子要素セレクタ（>）は直下の子要素にのみ適用されます。違いを理解すると意図通りのデザインがしやすくなります。

Q. クラスとIDはどちらを優先して使うべきですか？

A. 基本的にはクラスを使用するのが推奨です。IDはページ内で一意である必要があるため、スタイル指定よりもJavaScriptでの要素取得などに使うのが一般的です。

Q. セレクタの優先順位（Specificity）の基本を教えてください。

A. !important > インラインスタイル > IDセレクタ > クラス・属性・疑似クラス > 要素セレクタという順序で優先されます。スタイルが反映されないときはこの仕組みを確認しましょう。

Q. 実務でよく使うセレクタはどれですか？

A. クラスセレクタ、子孫セレクタ、疑似クラス（:hover や :nth-child）などです。特にUI実装ではクラスと疑似クラスの組み合わせが多用されます。