Selettore figlio

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 3 di 43.

Il selettore figlio ( > ) si usa quando vogliamo applicare uno stile agli elementi che sono figli diretti di un altro elemento. A differenza del selettore discendente, seleziona solo i figli diretti, non quelli più annidati.

Per esempio:

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

Applica lo stile solo ai figli diretti:

.parent > p {
  color: red;
}

Dopo aver applicato questo CSS, solo il primo paragrafo "This is a direct child" sarà rosso. Il secondo paragrafo non sarà interessato perché non è un figlio diretto del div con classe "parent".

Sfida

Facile

Hai un .team-container che contiene diverse sezioni di squadra. Il tuo compito è:

Usa il selettore figlio per applicare ai div figli diretti all'interno di .team-container uno sfondo azzurro, un padding di 10px e un margine di 5px.
Usa il selettore figlio per applicare agli elementi <h3> figli diretti all'interno dei div .team un colore verde e una dimensione del carattere di 20px.

Provalo tu

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