CSSセレクタ入門、CSSセレクタとは？セレクタの種類や指定方法を解説｜HTML＆CSS入門講座（27）

目　次

CSSセレクタ入門、CSSセレクタとは？セレクタの種類や指定方法を解説｜HTML＆CSS入門講座（27）のPodcast
はじめに
CSSセレクタの基本概念と役割
基本的なセレクタの種類
要素間の関係を定義する結合子
1. 子孫結合子と子結合子
2. 兄弟結合子
属性セレクタによる詳細な指定
疑似クラスと疑似要素
1. 疑似クラス（状態をターゲットにする）
2. 疑似要素（部分をターゲットにする）
最新の強力な疑似クラス：:is(), :where(), :has()
1. :is() と :where() による簡略化
2. 革命的な :has() セレクタ
セレクタの優先順位（詳細度）の仕組み
モダンCSSの設計と今後の学習
参考資料

CSSセレクタ入門、CSSセレクタとは？セレクタの種類や指定方法を解説｜HTML＆CSS入門講座（27）のPodcast

下記のPodcastは、Geminiで作成しました。

はじめに

CSSセレクタは、HTMLで記述された文書構造の中から「どの要素にスタイルを適用するか」を指定するための非常に重要な仕組みです。Webデザインにおいて、色やサイズ、レイアウトを変更する際には、必ずこのセレクタを使用して対象を特定する必要があります。本記事では、初心者の方にも分かりやすく、最新のCSS仕様に基づいたセレクタの種類や指定方法を丁寧に解説します。

CSSセレクタの基本概念と役割

CSSの基本的な書き方は、「セレクタ { プロパティ: 値; }」という形式をとります。この冒頭にある「セレクタ」が、デザインを適用する「対象」を指し示します。例えば、全ての段落の文字を赤くしたい場合は、段落を表す p タグをセレクタとして指定します。現代のWeb開発において、セレクタ의役割は単なる要素の特定に留まりません。ユーザーの操作（マウスホバーなど）に応じた状態の変化や、他の要素との位置関係、さらには特定の構造を持つ親要素の選択など、非常に高度な制御が可能になっています。

基本的なセレクタの種類

まずは、最も頻繁に利用される4つの基本セレクタを確認しましょう。

セレクタ名	記述例	対象となる要素
全称セレクタ	*	ページ内の全ての要素
要素型セレクタ	p, h1, div	指定したタグ名を持つ全ての要素
クラスセレクタ	.example	class="example" を持つ全ての要素
IDセレクタ	#main	id="main" を持つ唯一の要素

クラスセレクタは同じページ内で何度も再利用できるのに対し、IDセレクタは一つのページ内で一度しか使えないというルールがあります。現在はメンテナンス性の観点から、スタイル適用にはクラスセレクタを主に使い、IDセレクタは特別な場合に限定して使用するのが一般的です。

要素間の関係を定義する結合子

複数のセレクタを組み合わせることで、HTMLのツリー構造に基づいた複雑な指定が可能になります。これを「結合子」と呼びます。

子孫結合子と子結合子

子孫結合子（スペース）: A B と記述すると、要素Aの中にある全ての要素Bが対象となります。階層が深くても、Aの内側にある全てのBにスタイルが適用されます。

子結合子（>）: A > B と記述すると、要素Aの「直接の子供」である要素Bだけが対象となります。孫要素以降には影響を与えたくない場合に有効です。

兄弟結合子

同じ親を持つ要素同士の関係を指定します。

次兄弟結合子（+）: A + B は、要素Aのすぐ次にある要素Bだけを選択します。

後続兄弟結合子（~）: A ~ B は、要素Aよりも後ろにある全ての兄弟要素Bを選択します。

属性セレクタによる詳細な指定

HTMLタグの中に記述される href や type といった「属性」を利用して要素を選択することもできます。

構文	条件
[attr]	attr という属性を持っている
[attr="val"]	属性の値が val と完全一致する
[attr^="val"]	属性の値が val で始まる（例：外部リンクの特定）
[attr$="val"]	属性の値が val で終わる（例：PDFファイルの特定）
[attr*="val"]	属性の値の中に val が含まれている

最新の仕様では、属性値の照合において大文字と小文字を区別するかどうかを指定するフラグ（修飾子）が追加されています。例えば、[class*="test" i] のように末尾に i を付けると、大文字と小文字を区別せずに一致を確認できます。

疑似クラスと疑似要素

要素の状態や、要素の特定の部分を指し示すために「疑似クラス」と「疑似要素」が用意されています。

疑似クラス（状態をターゲットにする）

要素が特定の状態にあるときだけスタイルを適用します。コロン1つ : で記述します。

ユーザー操作: :hover（マウスが乗っているとき）、:focus（入力欄などにカーソルがあるとき）、:active（クリック中）。

構造的指定: :first-child（最初の子供）、:last-child（最後の子供）、:nth-child(n)（n番目の子供）。

疑似要素（部分をターゲットにする）

要素の特定の部分を装飾します。疑似クラスと区別するため、ダブルコロン :: を使うのが現在のルールです。

::before / ::after: 要素の直前や直後に、CSSだけで文字や装飾を追加します。

::first-line / ::first-letter: 最初の1行や最初の1文字だけを装飾します。

::marker: リストの先頭にある点や数字を対象にします。

最新の強力な疑似クラス：:is(), :where(), :has()

近年、CSSは劇的な進化を遂げ、これまでJavaScriptが必要だった複雑な制御もCSSのみで行えるようになりました。

:is() と :where() による簡略化

これらは複数のセレクタをまとめて記述する際に便利です。

article h1, section h1, nav h1 という指定は、:is(article, section, nav) h1 と書き直せます。

両者の違いは「詳細度（優先順位）」にあります。:is() は引数の中で最も高い詳細度を採用しますが、:where() は常に詳細度が「0」になります。後からスタイルを上書きしやすくしたい場合には :where() が適しています。

革命的な :has() セレクタ

:has() は「親セレクタ」としての機能を持ち、特定の要素を持っている親要素を選択できます。

例えば、.card:has(img) と記述すれば、「画像を含んでいるカード」だけにスタイルを適用できます。これは2023年以降、全ての主要ブラウザでサポートされるようになった最新かつ非常に強力な機能です。

セレクタの優先順位（詳細度）の仕組み

同じ要素に対して複数のスタイルが指定された場合、どのルールが優先されるかは「詳細度」というスコアで決まります。詳細度は「ID - クラス - 要素」の3つの列で計算され、左側の数字が大きいほど強力です。

セレクタ	ID	クラス・属性・疑似クラス	要素・疑似要素	スコア例
#header	1	0	0	1-0-0
.menu-item:hover	0	2	0	0-2-0
div p	0	0	2	0-0-2

スコアが全く同じ場合は、CSSファイルの下の方に書かれた（後から読み込まれた）ルールが優先されます。

また、!important を使うと詳細度を無視して最優先されますが、管理が難しくなるため、極力避けるのが賢明です。

モダンCSSの設計と今後の学習

2024年現在、CSSは「ネスト（入れ子）」という機能を標準でサポートするようになりました。これにより、以前のようにセレクタを何度も繰り返して書く必要がなくなり、コードの可読性が大幅に向上しています。

css

/* モダンなCSSネストの例 */
.nav {
  background: white;
  &.link {
    color: blue;
    &:hover { color: red; }
  }
}

このように、CSSセレクタの基本を押さえつつ、最新の :has() やネスト機能を活用することで、より効率的で美しいWebサイトを構築することができます。

参考資料

1. Selectors Level 4, https://www.w3.org/TR/selectors-4/

2. CSS selectors and combinators, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors/Selectors_and_combinators

3. CSS selectors, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors

4. Selectors, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors

5. :has() CSS relational pseudo-class, https://caniuse.com/css-has

6. CSS selector structure, https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Selectors/Selector_structure

7. :has() CSS pseudo-class, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has

8. :where() CSS pseudo-class, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:where

9. :is() CSS pseudo-class, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:is

10. Specificity, https://developer.mozilla.org/en-JP/docs/Web/CSS/Guides/Cascade/Specificity

11. CSSセレクタの優先順位の決まり方, https://webst8.com/code/css-selector-priority/

12. CSSの結合子, https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Styling_basics/Combinators

13. CSSの属性セレクタ, https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

14. CSSの擬似要素, https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

15. CSS :has() as a parent selector, https://blog.logrocket.com/blog/different-ways-to-use-css-has/

16. Latest CSS Features in 2024-2025, https://dev.to/prathamisonline/latest-css-features-in-2024-2025-whats-new-and-exciting-3ojj

17. Attribute selectors case sensitivity, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Attribute_selectors

18. State of CSS 2024, https://2024.stateofcss.com/en-US/features/

19. Web Platform Baseline 2024, https://web.dev/baseline/2024

20. CSS selector list, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Selector_list