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, selbst 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 nun einen Nachkommenselektor, um alle Absätze innerhalb des div zu gestalten:

.container p {
    color: blue;
}

Alle Absätze innerhalb des .container-div-Elements werden blau, sogar derjenige, der innerhalb des section-Elements 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 in 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>