CSSの子孫セレクタとは？使い方とサンプルコードでわかりやすく解説

CSSの子孫セレクタとは

子孫セレクタ（descendant selector）とは、特定の要素の中に含まれている要素だけにスタイルを適用したい場合に使うCSSのセレクタです。親要素と子孫要素を半角スペースで区切って指定することで、その組み合わせに一致する要素のみがスタイリングの対象になります。

例えば、リスト内の特定の要素だけ色を変えたい、見出しの中の強調テキストだけ装飾したい、といった場面で非常に便利です。ここでは、具体的なサンプルコードを使って子孫セレクタの基本的な使い方を紹介します。

ul要素内のem要素にスタイルを適用する例

次の例では、<em> 要素が <ul> タグの内部にある場合にのみ、スタイルルールが適用されます。<ul> の外側にある <em> 要素には影響しません。

ul em {
    color: #FFFF00;
}

このように記述すると、順不同リスト（<ul>）の中に含まれるすべての <em> 要素の文字色が黄色（#FFFF00）に変わります。

ol要素内のstrong要素にスタイルを適用する例

同様に、今度は番号付きリスト（<ol>）に対して、内部の <strong> 要素へスタイルルールを適用してみましょう。

ol strong {
    color: #808000;
}

この記述により、<ol> の中にある <strong> 要素の文字色がオリーブ色（#808000）になります。リストの外側にある <strong> 要素にはこのスタイルは反映されません。

まとめ

子孫セレクタは「親要素 子孫要素」のように半角スペースで区切って記述するだけで使えるため、CSSの中でも最もよく利用されるセレクタの一つです。ページ全体に影響を与えることなく、特定の構造の中にある要素だけをピンポイントで装飾できるので、実務でも積極的に活用しましょう。