Sélecteur d'enfant

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 3 sur 43.

Le sélecteur d'enfant ( > ) est utilisé lorsque nous voulons styliser des éléments qui sont des enfants directs d'un autre élément. Contrairement au sélecteur de descendant, il ne sélectionne que les enfants directs, pas ceux situés plus profondément.

Par exemple :

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

Appliquer le style uniquement aux enfants directs :

.parent > p {
  color: red;
}

Après avoir appliqué ce CSS, seul le premier paragraphe « This is a direct child » sera rouge. Le deuxième paragraphe ne sera pas affecté, car ce n’est pas un enfant direct de la div portant la classe « parent ».

Défi

Facile

Vous avez un .team-container qui contient plusieurs sections d’équipe. Votre tâche consiste à :

Utiliser le sélecteur d’enfant pour appliquer aux divs enfants directs à l’intérieur de .team-container un arrière-plan bleu clair, une marge intérieure de 10px et une marge extérieure de 5px.
Utiliser le sélecteur d’enfant pour appliquer aux éléments <h3> directs à l’intérieur des divs .team une couleur verte et une taille de police de 20px.

Essayez vous-même

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