子孫セレクタは「この中にある“全部の○○”にスタイルを当てるための選び方」
子孫セレクタは、 「ある要素の“内側にある”別の要素たちをまとめて選ぶためのセレクタ」です。
書き方はとてもシンプルで、 セレクタとセレクタの間を「半角スペース」でつなぎます。
.article p {
line-height: 1.8;
}
これは、
「.article クラスが付いている要素の“中にある”すべての <p> 要素」
に対して、行間 1.8 を適用する、という意味になります。
ポイントは、
「ページ全体の <p> ではなく、 “.article の中だけ”に絞ってスタイルを当てられる」
というところです。
子孫セレクタの基本構造と“どこまでが対象になるか”
「親セレクタ」と「内側のセレクタ」の関係
.container span {
color: red;
}
この子孫セレクタは、
「.container の内側にある、すべての <span>」
を対象にします。
HTMLで見るとイメージしやすいです。
<div class="container">
<p>この中の <span>span</span> は赤くなる。</p>
</div>
<p>この外の <span>span</span> は赤くならない。</p>
結果として、
.container の中にある <span> だけが赤くなり、 外側の <span> は何も変わりません。
ここで重要なのは、
「“直下の子”だけじゃなく、“もっと深い階層の孫・ひ孫”も全部対象になる」
ということです。
<div class="container">
<div>
<p>この中の <span>これも赤</span> です。</p>
</div>
</div>
この <span> も、 .container span の対象になります。
子孫セレクタの役割は「範囲を絞って、同じタグでも見た目を変えること」
同じ <p> でも「記事の中」と「外」でスタイルを変える
HTML：
<div class="article">
<p>この記事の本文です。</p>
<p>この記事の本文の2段落目です。</p>
</div>
<p>これは記事とは関係ない段落です。</p>
CSS：
.article p {
line-height: 1.8;
}
p {
line-height: 1.4;
}
この場合、
.article の中の <p> → 行間 1.8 外側の <p> → 行間 1.4
というように、 「同じ <p> でも、どこに属しているか」でスタイルを変えられます。
ここで子孫セレクタが担っている役割は、
「このコンテナの中だけ、特別なルールを適用する」
ということです。
ページ全体に一律のルールを当てるのではなく、 「この範囲だけは別扱い」という柔軟さを作るための道具が、子孫セレクタです。
子孫セレクタとクラスセレクタの“組み合わせ方”を掴む
「コンテナの意味」＋「中身の種類」で選ぶ
例えば、記事カードをこう作ったとします。
<div class="card">
<h2 class="title">タイトル</h2>
<p class="meta">2026年7月17日</p>
<p>本文テキスト。</p>
</div>
<div class="card">
<h2 class="title">別のタイトル</h2>
<p class="meta">2026年7月18日</p>
<p>別の本文テキスト。</p>
</div>
ここで「カードの中のメタ情報だけ」をグレーにしたいとき、 こう書けます。
.card .meta {
color: #666;
font-size: 14px;
}
意味としては、
「.card の中にある .meta クラスの要素全部」
です。
もし単に .meta だけで指定すると、 カードの外にある .meta まで全部グレーになります。
子孫セレクタを使うことで、
「このコンテナの中にある、この意味の要素だけ」
という、 より具体的な範囲指定ができるようになります。
JavaScriptでも子孫セレクタはそのまま“要素の選び方”になる
querySelectorAll で「この中の全部の○○」を取る
HTML：
<div class="article">
<p>1段落目</p>
<p>2段落目</p>
</div>
<div class="article">
<p>別の記事の1段落目</p>
</div>
CSS：
.article p {
line-height: 1.8;
}
JavaScript：
const paragraphs = document.querySelectorAll(".article p");
paragraphs.forEach((p) => {
p.style.borderLeft = "4px solid #007bff";
});
ここで ".article p" は、 CSSとまったく同じ「子孫セレクタ」です。
意味は、
「.article の中にあるすべての <p>」
で、 それらを全部取得して、左側に青い線を付けています。
つまり、
CSSで「どこにスタイルを当てるか」を決めるときの“選び方”と、 JavaScriptで「どこを操作するか」を決めるときの“選び方”が同じ言語（セレクタ）になっている。
子孫セレクタを理解しておくと、 CSSだけでなく JS でも「この中の全部の○○」を自然に扱えるようになります。
子孫セレクタの“やりすぎ注意ポイント”と設計のコツ
「深すぎるセレクタ」は管理が難しくなる
例えば、こういう書き方はよくありません。
.main .article .content p span strong {
color: red;
}
意味としては、
「.main の中の .article の中の .content の中の <p> の中の <span> の中の <strong>」
ですが、 ここまで深く書くと、
- HTML構造を少し変えただけでスタイルが壊れる
- どこが効いているのか分からなくなる
- 再利用性が低い
という状態になります。
初心者のうちは、
「コンテナ1つ＋中身1つ」くらいのシンプルな子孫セレクタから始める
のがおすすめです。
例：
.article p { ... }
.card .title { ... }
.nav a { ... }
このくらいなら、
- 意味も分かりやすい
- 構造が少し変わっても壊れにくい
というバランスが取れます。
初心者として「子孫セレクタ」で絶対に掴んでほしいこと
子孫セレクタは、
「あるコンテナの“内側にある”要素たちをまとめて選んで、その範囲だけスタイルや操作を当てるためのセレクタ」
です。
.article p → 「記事の中の段落だけ」 .card .meta → 「カードの中のメタ情報だけ」 .nav a → 「ナビゲーションの中のリンクだけ」
というように、
「どこに属しているか」＋「何の要素か・何のクラスか」
で範囲を絞るのが子孫セレクタの役割です。
あなたがCSSを書くときに、
「このスタイルは“ページ全体”じゃなくて、 このコンテナの中だけに効いてほしい。 だから .コンテナ セレクタ という子孫セレクタで範囲を絞ろう」
と自然に考えられるようになったら、 もう子孫セレクタを“ただのスペース付きの書き方”ではなく、 「デザインの適用範囲をコントロールするための、すごく大事なスイッチ」として扱えている状態です。
