Sélecteur de descendant

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

Dans le sujet précédent, nous avons découvert le combinateur d'enfant, qui cible les enfants directs d'un élément. Maintenant, explorons les sélecteurs de descendants, qui sont représentés par un espace. Un sélecteur de descendant vous permet de cibler des éléments qui sont imbriqués à l'intérieur d'un autre élément à n'importe quel niveau, et pas seulement les enfants directs.

Syntaxe

selector1 selector2 {
  /* property declarations */
}

Par exemple,

<html>
<head>
  <title>Combinator</title>
  <style>
    div p {
      color: red;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>
</body>
</html>

La règle CSS ci-dessus stylisera les deux paragraphes en rouge avec une taille de police de 2em.

Quel est le rapport avec les sélecteurs d'enfants ?

Un sélecteur de descendant est plus général qu'un sélecteur d'enfant. Cela signifie qu'un sélecteur de descendant correspondra à tous les éléments qui sont des descendants d'un élément spécifié, tandis qu'un sélecteur d'enfant ne correspondra qu'aux éléments qui sont des descendants directs d'un élément spécifié.

Par exemple, le sélecteur div p correspondra à tous les éléments p qui sont des descendants d'un élément div, y compris les éléments p qui sont imbriqués dans d'autres éléments p. Le sélecteur div > p ne correspondra qu'aux éléments p qui sont des descendants directs d'un élément div.

Défi

Facile

En vous basant sur l'exercice précédent, utilisons la même structure HTML. Écrivez une règle CSS utilisant le sélecteur de descendant pour styliser tous les paragraphes à l'intérieur de l'élément .list, quel que soit leur niveau d'imbrication. Donnez-leur une nouvelle couleur, une taille et une police à votre convenance.

Essayez vous-même

<html>
<head>
    <title>Descendant Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
<div>
    <p>This paragraph is not inside a list</p>
    <ul class="list">
        <li>
            <p>This is a paragraph inside a list item.</p>
        </li>
        <li>
            <div>
                <p>This is a paragraph inside a nested div within a list item.</p>
            </div>
        </li>
    </ul>
</div>
</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 descendantSélecteur de frère adjacent Sélecteur de frère général