Sélecteur d'enfant

Fait partie de la section CSS Mastery 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 second paragraphe ne sera pas affecté car il n'est pas un enfant direct du div avec la classe « parent ».

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

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

Utilisez le sélecteur d'enfant pour styliser les divs enfants directs à l'intérieur de .team-container avec un arrière-plan bleu clair, un padding de 10px et une marge de 5px.
Utilisez le sélecteur d'enfant pour styliser les éléments <h3> directs à l'intérieur des divs .team avec une couleur verte et une taille de police de 20px.

Aide-mémoire

Le sélecteur d'enfant (>) sélectionne uniquement les enfants directs d'un élément, et non les descendants plus profonds.

Syntaxe :

parent > child {
  /* styles */
}

Exemple :

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

.parent > p {
  color: red;
}

Seul le premier paragraphe sera rouge car il s'agit d'un enfant direct de .parent.

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>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.