Selektor dziecka

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 3 z 43.

Selektor dziecka ( > ) jest używany, gdy chcemy stylować elementy, które są bezpośrednimi dziećmi innego elementu. W przeciwieństwie do selektora potomka wybiera tylko bezpośrednie dzieci, a nie elementy położone głębiej.

Na przykład:

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

Stosuj style tylko do bezpośrednich elementów potomnych:

.parent > p {
  color: red;
}

Po zastosowaniu tego CSS tylko pierwszy akapit „This is a direct child” będzie czerwony. Drugi akapit nie zostanie zmieniony, ponieważ nie jest bezpośrednim elementem potomnym elementu div z klasą „parent”.

Wyzwanie

Łatwy

Masz element .team-container, który zawiera kilka sekcji drużyn. Twoje zadanie:

Użyj selektora dziecka, aby nadać bezpośrednim elementom div wewnątrz .team-container jasnoniebieskie tło, dopełnienie 10px i margines 5px.
Użyj selektora dziecka, aby nadać bezpośrednim elementom <h3> wewnątrz elementów div .team zielony kolor i rozmiar czcionki 20px.

Spróbuj swoich sił

<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>