子セレクタと子孫セレクタの違いを徹底解説！中学生にもわかる使い分けのコツと実例

---

はじめに：子セレクタと子孫セレクタの基本をざっくり押さえよう

CSSの世界には、要素をどう選ぶかを決める仕組みがいくつもあります。その中でも「子セレクタ」と「子孫セレクタ」は、要素を特定する基本的な道具です。子セレクタは直系の子要素だけを指定します。記法は「＞」を使います。例えば、ul > liと書くと、ul の直下にある li だけが対象になります。
一方、子孫セレクタは親と子の深さを問わず、ある要素の中に含まれるすべての子孫を選択します。記法は通常のスペースです。例えば、ul liと書くと、ul の中の任意の階層にいる li が対象になります。
この違いを理解することは、CSS の挙動を予測しやすくする第一歩です。直系かどうかという条件を意識して使い分けると、意図しない場所にスタイルが広がるのを防げます。現場のコーディングでは、構造が深くなるほど指定を絞る工夫が必要になります。
また、ページを作るときには、後からサイトを保守する人のことを考え、不要なセレクタの肥大化を避けることも大切です。親子関係をきちんと設計しておくと、後の変更にも強くなります。
この章では、直系と非直系の違いを把握するだけでなく、実務での使い分けのコツを身につけることが目標です。

具体的な例と比較表で違いを確認しよう

ここでは実際のHTMLの例を使い、子セレクタと子孫セレクタの挙動を比べます。まず基本の意味をもう一度整理します。子セレクタは「>」でつなぐことで、親要素の直下にある子要素だけを対象にします。例として div > p のように書くと、div の直下にある p のみがスタイルの影響を受けます。
対して子孫セレクタはスペースでつなぎ、親子の階層をまたいで、親の中にいるすべての子孫要素を対象にします。例は div span です。これは div の中の任意の階層にある span 全てに適用されます。
以下の表は、代表的な差をスッキリ整理したものです。

able>セレクタの形式対象の範囲実例子セレクタ直系の子要素のみul > li は ul の直下の li のみ子孫セレクタ親の階層に関係なく子孫全てul li は ul の中のすべての lible>

この差を頭の中に置いておくと、CSS を後から整理するときに役立ちます。例えばカード型のデザインで、カードの内部だけの見出しを変えたい場合にはカード直下の見出しを狙う子セレクタを使います。反対に、カードの中のリストを全体的に整えたい場合には子孫セレクタを選ぶと効率的です。
また、HTML 構造が変わっても適用範囲を崩さずに済むよう、過剰なネストを避け、必要な直下だけを指定する癖をつけましょう。実務ではこの「狙いを絞る力」がCSS の読みやすさと保守性を大きく左右します。

使い分けのコツは、まず目的をはっきりさせることです。見出しだけを色を変えたいときは、見出しの直下の要素を狙う子セレクタが適しています。逆に、構造が複雑で同じスタイルをたくさんの要素に適用したいときは子孫セレクタが便利です。さらに、HTML 構造が変わっても崩れにくいよう、CSS ファイルを小さな「ルールの塊」に分け、直系と非直系の使い分けを統一した命名規則で管理すると、後からの変更が楽になります。

ピックアップ解説

先生: 今日は子セレクタと子孫セレクタの話をします。生徒A: 直系の子だけってどういう意味？ 生徒B: 例えば家の階層関係を例にすると、親の階段の一段下の椅子だけを狙うのが子セレクタ、階層を越えてその場所にあるすべての椅子を狙うのが子孫セレクタ、みたいな感じだよ。直系かどうかは“今この場所からの道順”を決める鍵で、これを覚えておくと CSS が整理しやすくなるんだ。カードデザインなら直下だけを変える子セレクタ、リスト全体の雰囲気をそろえるなら子孫セレクタを使うと効率的。実務では、構造が変わっても崩れにくいよう、意図を絞ることが大切なんだ。

---