Nachfahren-Selektor

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 2 von 43.

Der erste Selektor ist der Nachfahrenselektor. Wir verwenden ihn, wenn wir Elemente gestalten möchten, die sich innerhalb eines anderen Elements befinden, auch wenn sie tief verschachtelt sind. Zum Beispiel befinden sich zwei Absätze innerhalb eines Containers.

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

Verwenden wir jetzt einen Nachfahrenselektor, um alle Absätze innerhalb des div zu gestalten:

.container p {
    color: blue;
}

Alle Absätze innerhalb des .container-Divs werden blau, sogar der Absatz, der im section-Element verschachtelt ist.

Aufgabe

Einfach

Erstelle eine CSS-Regel, die alle Listenelemente (<li>) auswählt, die Nachfahren eines Elements mit der Klasse "navigation" sind, und ihre Textfarbe auf Lila ändert.

Probier es selbst

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