子孫セレクター

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

最初のセレクターは子孫セレクターです。別の要素の内側にある要素を、たとえ深くネストされていてもスタイル設定したい場合に使用します。たとえば、container の内側には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 の inside にあるすべての段落にスタイルを適用しましょう。

.container p {
    color: blue;
}

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

チャレンジ

簡単

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

自分で試してみよう

<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>