Selektor potomka

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 2 z 43.

Pierwszy selektor to selektor potomka. Używamy go, gdy chcemy stylować elementy znajdujące się wewnątrz innego elementu, nawet jeśli są zagnieżdżone głęboko. Na przykład w kontenerze znajdują się dwa akapity.

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

Teraz użyjmy selektora potomków, aby ostylować wszystkie akapity wewnątrz elementu div:

.container p {
    color: blue;
}

Wszystkie akapity wewnątrz elementu div .container zmienią kolor na niebieski, nawet ten zagnieżdżony wewnątrz elementu section.

Wyzwanie

Łatwy

Utwórz regułę CSS, która wybiera wszystkie elementy listy (<li>) będące potomkami elementu z klasą "navigation" i zmienia kolor ich tekstu na fioletowy.

Spróbuj swoich sił

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