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.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

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.

Spickzettel

Der Nachfahren-Selektor formatiert Elemente, die sich innerhalb eines anderen Elements befinden, selbst wenn sie tief verschachtelt sind.

Syntax: Verwenden Sie ein Leerzeichen zwischen dem Eltern- und dem Nachfahren-Selektor:

.container p {
    color: blue;
}

Dies wählt alle <p>-Elemente innerhalb eines Elements mit der Klasse container aus, unabhängig von der Verschachtelungstiefe.

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.