Nachfahren-Selektor

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

Der erste Selektor ist der Nachfahren-Selektor. Wir verwenden ihn, wenn wir Elemente stylen möchten, die sich innerhalb eines anderen Elements befinden, selbst wenn sie tief verschachtelt sind. Zum Beispiel befinden sich zwei Absätze in einem Container.

<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 nun einen Nachfahren-Selektor, um alle Absätze innerhalb des div-Elements zu stylen:

.container p {
    color: blue;
}

Alle Absätze innerhalb des .container-divs werden blau — sogar derjenige, der innerhalb des section-Elements verschachtelt ist.

Aufgabe

Einfach

Erstellen Sie eine CSS-Regel, die alle Listenelemente (<li>) auswählt, die Nachfahren eines Elements mit der Klasse "navigation" sind, und deren Textfarbe in purple ä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>