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.

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.

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>