Sélecteur d'enfant

Leçon 7 sur 15 du cours Sélecteurs CSS de Coddy.

Un sélecteur d'enfant est un type de sélecteur CSS qui sélectionne tous les éléments qui sont des enfants directs d'un élément spécifié. Le sélecteur d'enfant est représenté par un signe supérieur à (>) entre deux sélecteurs.

Exemple :

Considérez la structure HTML suivante :

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

Pour cibler le paragraphe enfant direct, vous utiliseriez le combinateur d'enfant comme suit :

.parent > p {
    color: blue;
}

Dans cet exemple, seul le paragraphe enfant direct deviendra bleu, et non celui imbriqué à l'intérieur du <div> interne.

Les sélecteurs d'enfants peuvent également être utilisés pour éviter de styliser des éléments qui ne sont pas des enfants directs d'un élément spécifié. Par exemple, vous pourriez utiliser un sélecteur d'enfant pour styliser en rouge tous les liens qui sont des enfants directs d'un élément p.

Défi

Facile

Étant donné la structure HTML suivante, créez une règle CSS utilisant le combinateur d'enfant pour styliser les éléments de liste directs à l'intérieur de l'élément <ul> afin qu'ils aient une couleur d'arrière-plan 'yellow'.

Essayez vous-même

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</body>
</html>

Toutes les leçons de Sélecteurs CSS

1Introduction aux sélecteurs CSS

Rôle des sélecteurs CSS Pourquoi sont-ils importants ?

4Sélecteurs d'attributs

Introduction aux sélecteurs d'attributs Présence et valeurs exactes Sélecteurs de valeur d'attribut Sélecteurs de valeur d'attribut II Sélecteurs de valeur d'attribut III

2Sélecteurs simples

Sélecteurs de type Sélecteurs de classe Sélecteurs d'ID Sélecteurs universels

3Sélecteurs combinateurs

Sélecteur d'enfantSélecteur de descendant Sélecteur de frère adjacent Sélecteur de frère général