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

CSSセレクタとは、HTML要素を特定してスタイルを適用するためのパターン記述のことです。クラスセレクタ（.button）やID（#header）などの基本形から、:nth-child()のような疑似クラス、:has()のような新しい関係性セレクタまで、用途に応じて50種類以上が用意されています。本記事では、実務で頻出する基本セレクタから2024年以降に主要ブラウザでサポートされた最新セレクタまで、コード例付きで体系的に解説します。

主要CSSセレクタ早見表（チートシート）

実務で頻出するCSSセレクタをカテゴリ別に20種類まとめました。各セレクタの構文と簡単な用途、コード例をまとめています。ブックマークして辞書代わりにご活用ください。

カテゴリ	セレクタ	用途	コード例
基本	*	全要素	* { box-sizing: border-box; }
基本	要素名	要素を選択	p { margin: 0; }
基本	.class	クラスで選択	.btn { padding: 8px; }
基本	#id	IDで選択（1ページに1つ）	#header { position: fixed; }
基本	A, B	複数まとめて選択	h1, h2 { font-weight: bold; }
関係性	A B	子孫すべて	nav a { color: blue; }
関係性	A > B	直接の子のみ	ul > li { list-style: none; }
関係性	A + B	直後の隣接兄弟	h2 + p { margin-top: 0; }
関係性	A ~ B	後続の兄弟すべて	h2 ~ p { color: gray; }
属性	[attr]	属性を持つ要素	[required] { border: red; }
属性	[attr=”val”]	属性値が完全一致	[type=”email”] { … }
属性	[attr^=”val”]	属性値が前方一致	[href^=”https”] { … }
属性	[attr$=”val”]	属性値が後方一致	[href$=”.pdf”] { … }
疑似クラス	:hover	マウスオーバー時	a:hover { color: red; }
疑似クラス	:nth-child(n)	n番目の子要素	li:nth-child(2n) { … }
疑似クラス	:not(S)	Sに該当しない要素	li:not(.active) { … }
疑似クラス	:is(A, B)	複数の一括指定	:is(h1, h2, h3) { … }
疑似クラス	:where(A, B)	詳細度0で一括指定	:where(h1, h2) { … }
疑似クラス	:has(S)	Sを子に持つ親要素	.card:has(img) { … }
疑似要素	::before / ::after	要素の前後に挿入	.icon::before { content: “★”; }

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

CSSセレクターアプリA

CSSセレクターアプリ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セレクタ完全リスト

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; }`

:is() — 複数セレクタの一括指定

:is()は、複数のセレクタを1つにまとめて記述できる疑似クラスです。同じスタイルを複数の要素に適用するときに、コードを劇的に短くできます。詳細度は引数内で最も高いセレクタが採用される点に注意が必要です。

/* :is()を使わない場合 */
header h1, header h2, header h3 { color: navy; }
main h1, main h2, main h3 { color: navy; }
article h1, article h2, article h3 { color: navy; }

/* :is()を使う場合（同じ意味） */
:is(header, main, article) :is(h1, h2, h3) { color: navy; }

使いどころ: 親要素が複数パターンある場合のスタイル指定、ネストが深くなりがちなCSSの簡略化。Chrome 88・Safari 14・Firefox 78以降でサポート（2021年以降のモダンブラウザは全対応）。

:where() — 詳細度ゼロでスタイルを当てる

:where()は:is()と同じ挙動ですが、詳細度が常に0になる点が決定的に違います。リセットCSSやデフォルトスタイル、デザインシステムの基盤に最適で、ユーザー側のカスタマイズを邪魔しません。

/* リセットCSS的な用途 */
:where(ul, ol) { padding-left: 1.5em; }
:where(h1, h2, h3) { margin-block: 0.5em; }

/* これらは詳細度0なので、後で簡単に上書きできる */
.menu ul { padding-left: 0; }  /* これだけで勝てる */

使いどころ: リセットCSS、デザインシステムのベーススタイル、プラグインやライブラリのデフォルト指定。ユーザー側のクラスセレクタ1つで上書きできる「優しいスタイル」を作れます。

:has() — 「親セレクタ」として使える革新的セレクタ

:has()は子要素の有無で親要素を選択できる、CSSの歴史を変えた疑似クラスです。長年「親セレクタはCSSにない」と言われてきましたが、:has()の登場で実現しました。Chrome 105・Safari 15.4・Firefox 121以降でサポート（2024年に全モダンブラウザで利用可能になりました）。

/* 画像を含むカードだけスタイルを変える */
.card:has(img) { padding: 0; }

/* チェックされたチェックボックスを持つラベル */
label:has(input:checked) { background: #e0f7fa; }

/* 必須項目を含むフォームグループに印 */
.form-group:has([required]) { border-left: 4px solid red; }

使いどころ: 子要素の状態に応じた親のスタイル変更、フォームバリデーション表示、コンテンツ有無による条件分岐。JavaScriptを書かずにインタラクティブなUIが実現できます。

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);
}

セレクタが効かない時の5つの対処法

「書いたはずのCSSが効かない」と感じたとき、原因はほぼ以下の5パターンに集約されます。上から順にDevToolsで確認していくと、ほとんどのケースで原因を特定できます。

1. 詳細度（Specificity）の競合で上書きされている

同じプロパティを別のセレクタで指定している場合、詳細度の高い方が勝ちます。例えば.btn { color: red; }を書いても、別ファイルで#main .btn { color: blue; }が指定されていれば青になります。

Chrome DevToolsで対象要素を選択し、Stylesパネルで取り消し線（打ち消し）が入っているプロパティを探す
打ち消されている場合、上書きしているセレクタの詳細度を確認
セレクタの構造を見直すか、:where()で詳細度を0にして対応する（!importantの乱用は避ける）

2. CSSの記述順で上書きされている

詳細度が同じ場合、後に書かれたスタイルが適用されます。style.cssを読み込んだ後にプラグインのCSSが読み込まれているケースなど、<link>タグの順番にも注意が必要です。

DevToolsのSourcesタブで読み込み順を確認
カスタムCSSは最後に読み込ませる、または:where()でリセットしてから上書きする

3. タイポ・全角文字の混入

クラス名のスペルミスや、全角スペース・全角コロン（：）の混入はよくある落とし穴です。DevToolsでセレクタ自体がそもそも認識されていない場合、Stylesパネルに表示すらされません。

DevToolsで対象要素を選択し、Stylesパネルに該当セレクタが出ているか確認
出ていない場合、CSSファイルでセレクタ名・コロン・セミコロンを目視チェック
エディタで「全角スペース・全角記号を可視化」する設定をオンにする

4. ブラウザキャッシュで古いCSSが読まれている

編集したのに変化がない場合、ブラウザが古いCSSをキャッシュしている可能性があります。特に本番環境やCDN経由では、キャッシュの影響を強く受けます。

Ctrl + Shift + R（Mac: Cmd + Shift + R）でスーパーリロード
DevToolsのNetworkタブで「Disable cache」にチェック
本番ではstyle.css?v=20260521のようにバージョン文字列を付ける

5. スコープミス（コンポーネント・iframe・Shadow DOM）

Vue / React / Astro のscoped CSSや、Shadow DOM内の要素は、外部のCSSが届かない設計になっています。iframe内の要素も同様に親のCSSが効きません。

DevToolsで対象要素を選択し、Shadow DOM（#shadow-root表示）かどうか確認
scoped CSSの場合は:deep()（Vue）や:global()（CSS Modules）で例外指定
iframe内に効かせたい場合は、iframe側で独立してCSSを読み込む

まとめ

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

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

差分チェックツールで効率UPお手本コードと自分のコードを比較して、違いを一目で確認できます。練習前にブックマークしておくと便利です。

Diff Checkerを開く →

「練習ツールはこちら」

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

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

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

クラスを中心に設計する

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

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

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

開発ツールで確認する

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

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

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

よくある質問

Q. CSSセレクタの種類はいくつありますか？

基本セレクタ（要素・クラス・ID・ユニバーサル）、結合子（子孫・子・隣接兄弟・一般兄弟）、擬似クラス（:hover、:nth-child()等）、擬似要素（::before、::after等）、属性セレクタなど、50種類以上のセレクタが用意されています。本記事の主要CSSセレクタ早見表にカテゴリ別の一覧をまとめています。

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

実際に手を動かして使いながら覚えるのが一番効果的です。ブラウザの開発者ツールで試したり、小さなサンプルコードを作って確認することで、セレクタの効果を視覚的に理解できます。本記事冒頭のCSSセレクターアプリ（A・Bタイプ）で実践してみてください。

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

子孫セレクタ（A B）は、Aの中にあるすべてのBに適用されます。一方、子要素セレクタ（A > B）は、Aの直接の子要素であるBにのみ適用されます。例えばdiv pはdiv内のすべてのp（孫以降も含む）、div > pは直接の子のpだけが対象です。

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

基本的にクラスを優先します。クラスは複数の要素に適用でき再利用性が高い一方、IDは1ページに1つしか使えないためスタイル指定には不向きです。IDはJavaScriptでの要素取得やページ内アンカーリンクに使うのが一般的です。

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

IDセレクタは詳細度（Specificity）が非常に高いため、後からスタイルを上書きしにくくなり、CSSの保守性・再利用性が大きく下がります。デザインシステムやコンポーネント設計と相性が悪いため、スタイル指定にはクラスセレクタの使用が推奨されます。

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

詳細度はインラインスタイル > ID > クラス・属性・擬似クラス > 要素・擬似要素の順で強くなります。同じプロパティが複数の場所で指定された場合、最も詳細度が高いセレクタが採用されます。詳細度が同じ場合は、CSSの記述順で後に書かれた方が適用されます。

Q. CSSセレクタの詳細度の計算方法は？

インラインスタイルが1000点、IDセレクタ（#id）が100点、クラス・属性・擬似クラスが10点、要素・擬似要素が1点として加算します。例えば.nav .link aは0-0-2-1（クラス2つ + 要素1つ = 21点相当）のように計算します。

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

クラスセレクタ（.class）、子孫セレクタ（.parent .child）、擬似クラス（:hover、:nth-child()、:not()）、擬似要素（::before、::after）が頻出です。さらに2024年以降はモダンブラウザで利用可能になった:has()、:is()、:where()も実務でよく使われるようになりました。

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

構造タグはHTMLのセマンティクス（意味づけ）を明確にすることで、検索エンジンがページ構造を理解しやすくなります。直接的なランキング要因ではないものの、アクセシビリティやUX向上を通じてSEOにも間接的にプラスに働きます。main・article・navなどを適切に使うことが推奨されます。

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