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

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

HTMLのidとclass — セレクタの土台を理解する

CSSセレクタを正しく使いこなすには、HTMLのid属性とclass属性の違いを理解しておくことが不可欠です。この章では、実務での使い分けの指針を解説します。

id属性の特徴

ページ内で一意（1ページ内で同じidは1つだけ）
主な用途
- JavaScriptで特定要素を取得
- ページ内リンクのアンカー（<a href="#contact"> など）

<div id="contact">
  <h2>お問い合わせ</h2>
</div>

class属性の特徴

複数の要素で共有可能
主な用途
- CSSで共通デザインを適用
- 複数要素をまとめて扱う

<div class="card">
  <h3>商品タイトル</h3>
  <p>商品説明</p>
</div>

使い分けの指針

デザインやレイアウトのスタイル指定 → class
ページ内で唯一の要素や目印 → id
セクション単位（about, service, contact など）にはidを付与
再利用する小ブロックやデザイン要素はclassで管理

<main>
  <section id="about" class="section section-about">
    <h2>私たちについて</h2>
    <p>会社概要や理念...</p>
  </section>

  <section id="service" class="section section-service">
    <h2>サービス</h2>
    <div class="card">サービスA</div>
    <div class="card">サービスB</div>
  </section>

  <section id="contact" class="section section-contact">
    <h2>お問い合わせ</h2>
    <form>...</form>
  </section>
</main>

HTML構造タグとセレクタの関係

セマンティックな構造タグを正しく使うことで、CSSセレクタの設計がシンプルになり、SEOやアクセシビリティも向上します。

よく使う構造タグ

<header>：ページやセクションのヘッダー部分
<main>：ページの主要コンテンツ（1ページに1つ）
<section>：意味を持つまとまり
<article>：独立して成立する記事や投稿
<aside>：補足情報（広告やサイドバーなど）
<footer>：ページやセクションのフッター部分

構造タグを活用したセレクタ設計例

/* 構造タグを要素セレクタとして活用 */
main article h2 { font-size: 24px; }
aside p { color: #666; }
nav a:hover { text-decoration: underline; }

/* classと組み合わせてより明確に */
section.hero { background: #f0f0f0; }
footer .copyright { text-align: center; }

よくある間違い

divやspanを多用して構造タグを使わない → SEOやアクセシビリティに不利
idを複数箇所で使ってしまう → JavaScriptで誤動作
mainを複数設置 → ページ構造が崩れる

CSSセレクタ完全リスト

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

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

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

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

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

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

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

セレクタの土台となるHTMLのidとclassの使い分け、そして構造タグの正しい活用を押さえておくことで、よりメンテナブルで意味のあるCSS設計が可能になります。迷ったら「意味を持たせたいなら構造タグ」「スタイルはclass」「唯一の要素ならid」と覚えておくと便利です。

「練習ツールはこちら」

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

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

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

クラスを中心に設計する

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

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

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

開発ツールで確認する

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

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

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

よくある質問

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

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

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

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

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

A. 基本的にはクラスを使用するのが推奨です。IDはページ内で一意である必要があるため、スタイル指定よりもJavaScriptでの要素取得やページ内リンクのアンカーに使うのが一般的です。セクション単位（about, service, contactなど）にはidを付与し、繰り返しのデザイン要素にはclassで管理するのが実務的な使い分けです。

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

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

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

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

Q. CSSでidに依存しすぎるとどうなりますか？

A. IDセレクタはSpecificityが高いため、後からスタイルを上書きしにくくなり再利用性が下がります。CSSのスタイル指定にはclassを使い、idはJavaScriptやページ内リンク用に限定するのがベストプラクティスです。

Q. 構造タグ（header, main, sectionなど）はSEOに影響しますか？

A. 構造タグを正しく使うことで、検索エンジンがページの構造を理解しやすくなり、SEOやアクセシビリティの向上につながります。divやspanの多用を避け、意味に合った構造タグを選びましょう。

【完全保存版】CSSセレクタ一覧｜基本から応用まで実例付きで徹底解説