CSS 後代セレクタ

後代セレクタ（descendant selector）は、含まれるセレクタ（include selector）とも呼ばれます。

後継子選択子は、ある要素の後継として存在する要素を選択できます。

文脈に基づいて要素を選択

私たちは後継子選択子を定義し、これらのルールが特定のドキュメント構造で効果を発揮し、他の構造では効果を発揮しないようにする規則を作成できます。

例えば、h1要素内のem要素にのみスタイルを適用したい場合は、以下のように書くことができます：

h1 em {color:red;}

このルールは、h1要素の後継のem要素のテキストを赤色にします。他のemテキスト（例えば、段落やブロック引用のem）はこのルールで選択されません：

<h1>これは重要な見出しです。</h1>
<p>これは重要な段落です。</p>

自分で試してみる

もちろん、h1に見られる各em要素にクラス属性を設定することもできますが、後継子選択子の効率がはるかに高いことは明らかです。

文法解説

後継子選択子では、ルールの左側のセレクタは、空格で区切られた2つ以上のセレクタを含みます。セレクタ間の空間は結合子（combinator）です。各空間結合子は「...が...に存在する」、「...が...の一部である」、「...が...の後継である」と解釈できますが、セレクタを読み進める方向は右から左です。

したがって、h1 em セレクタは「h1要素の後継の任何のem要素」と解釈できます。セレクタを読み進める方向を右から左に変更する場合は、以下のようになります：「emを含むすべてのh1は以下のスタイルを適用します」。

具体的な適用

後継子選択子の機能は非常に強力です。これにより、HTMLで不可能であったタスクを可能にすることができます。

ドキュメントが一つのサイドバーと一つのメインエリアを持っていると仮定します。サイドバーの背景は青で、メインエリアの背景は白です。これらのエリアはどちらもリンクリストを含んでいます。すべてのリンクを青に設定すると、サイドバーの青いリンクが見えなくなるため、これはできません。

解決策は後継子選択子を使用することです。この場合、サイドバーを含む div にクラス属性の値を sidebar に指定し、メインエリアのクラス属性の値を maincontent に設定します。次のスタイルを記述します：

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

後代セレクタについて、無視されがちな一面があります。それは、二つの要素間の階層の間隔が無限に大きいことがあります。

例えば、ul em と書かれた場合、この構文は ul 要素から継承されたすべての em 要素を選択します。em のネストレーションレベルに関係なく、深さに関わらずです。

したがって、ul em は以下のすべての em 要素を選択します：

<ul>
  <li>リストアイテム 1</li>
    <ol>
      <li>リストアイテム 1-1</li>
      <li>リストアイテム 1-2</li>
      <li>リストアイテム 1-3</li>
        <ol>
          <li>リストアイテム 1-3-1</li>
          <li>リストアイテム</li> <em>1-3-2</em></li>
          <li>リストアイテム 1-3-3</li>
        </ol>
      </li>
      <li>リストアイテム 1-4</li>
    </ol>
  </li>
  <li>リストアイテム 2</li>
  <li>リストアイテム 3</li>
</ul>

自分で試してみる