子孫セレクター

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 2/43。

最初のセレクタは 子孫セレクタ です。これは、別の要素の中にある要素（深く入れ子になっている場合でも）にスタイルを適用したい場合に使用します。例えば、コンテナの中に2つの段落がある場合などです。

<div class="container">
    <p>This is a paragraph inside a div.</p&    <section>
        <p>This is a paragraph inside a section that is inside a div.</p>
    </section>
</div>

それでは、子孫セレクタを使用して、div内にあるすべての段落にスタイルを適用してみましょう。

.container p {
    color: blue;
}

.container div 内のすべての段落は、section 要素の中にネストされているものも含め、すべて青色になります。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

クラス名が "navigation" である要素の子孫であるすべてのリスト項目（<li>）を選択し、そのテキストの色を purple に変更するCSSルールを作成してください。

チートシート

子孫セレクタは、別の要素の中にある要素に、たとえ深く入れ子になっていてもスタイルを適用します。

構文：親セレクタと子孫セレクタの間にスペースを使用します：

.container p {
    color: blue;
}

これは、入れ子の深さに関係なく、container クラスを持つ要素の中にあるすべての <p> 要素を選択します。

自分で試してみよう

<html>
<head>
    <title>Descendant Selector</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <ul class="navigation">
        <li>Home</li>
        <li>Team
            <ul>
                <li>Players</li>
                <li>Coaches</li>
            </ul>
        </li>
        <li>Tickets</li>
    </ul>
</body>
</html>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。