Kind-Selektor

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

Der Kind-Selektor ( > ) wird verwendet, wenn wir Elemente stylen möchten, die direkte Kinder eines anderen Elements sind. Im Gegensatz zum Nachfahren-Selektor wählt er nur direkte Kinder aus, keine tiefer verschachtelten.

Zum Beispiel:

<div class="parent">
  <p>This is a direct child</p>
  <section>
    <p>This is a grandchild (not a direct child)</p>
  </section>
</div>

Styling nur auf direkte Kindelemente anwenden:

.parent > p {
  color: red;
}

Nach dem Anwenden dieses CSS wird nur der erste Absatz „This is a direct child“ rot dargestellt. Der zweite Absatz wird nicht beeinflusst, da er kein direktes Kind-Element des div mit der Klasse „parent“ 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

Sie haben einen .team-container, der mehrere Team-Abschnitte enthält. Ihre Aufgabe ist es:

Verwenden Sie den Child-Selector, um direkte Kind-divs innerhalb von .team-container mit einem hellblauen Hintergrund, einem Padding von 10px und einem Margin von 5px zu gestalten.
Verwenden Sie den Child-Selector, um direkte <h3>-Elemente innerhalb von .team-divs mit einer grünen Farbe und einer Schriftgröße von 20px zu gestalten.

Spickzettel

Der Kind-Selektor (>) wählt nur direkte Kindelemente eines Elements aus, keine tieferen Nachfahren.

Syntax:

parent > child {
  /* Stile */
}

Beispiel:

<div class="parent">
  <p>Direct child - will be styled</p>
  <section>
    <p>Grandchild - won't be styled</p>
  </section>
</div>

.parent > p {
  color: red;
}

Nur der erste Absatz wird rot sein, da er ein direktes Kindelement von .parent ist.

Probier es selbst

<html>
<head>
    <title>Child Selector</title>
    <style>
       /* Write CSS rules here */
       
    </style>
</head>
<body>
    <div class="team-container">
        <div class="team">
            <h3>Basketball Team</h3>
            <ul>
                <li>LeBron James</li>
                <li>Stephen Curry</li>
                <li>Kevin Durant</li>
            </ul>
        </div>
        <div class="team">
            <h3>Football Team</h3>
            <ul>
                <li>Tom Brady</li>
                <li>Patrick Mahomes</li>
                <li>Davante Adams</li>
            </ul>
        </div>
        <div class="team">
            <h3>Soccer Team</h3>
            <ul>
                <li>Lionel Messi</li>
                <li>Cristiano Ronaldo</li>
                <li>Neymar Jr.</li>
            </ul>
        </div>
    </div>
</body>
</html>

Teste dich selbst

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