Sélecteurs descendant

Le combinateur de descendance, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs  (sous la forme sélecteur₁ sélecteur₂) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants.

Techniquement, le combinateur de descendance est représenté par un ou plusieurs blancs (les caractères qui sont des blancs sont : l'espace, le retour chariot, le saut de ligne, la tabulation verticale, la tabulation horizontale) entre deux sélecteurs lorsqu'il n'y a aucun autre combinateur. Les blancs utilisés pour le combinateur peuvent éventuellement contenir des commentaires CSS.

Ce combinateur moins visible a un nature abstraite que les autres combinateurs représentés par des symboles (+ pour le combinateur des voisins directs, > pour les éléments fils, ~ pour les éléments voisins). Les brouillons actuels de la spécification CSS de niveau 4 sur les sélecteurs (module CSS Selectors) visent à corriger cette incohérence en ajoutant un autre combinateur pour représenter la descendance en utilisant deux chevrons fermants qui se suivent. Toutefois, ce nouveau combinateur n'est pas encore implémenté par un navigateur, y compris par Firefox.

Syntaxe

selecteur₁ selecteur₂ { /* déclarations CSS */ }

Les blancs servent donc à organiser le code visuellement et comme combinateur. De fait, si on l'utilise sans précaution, on peut obtenir des fragments de code peu clairs :

selecteur₁ /* commentaires */ selecteur₂ { /* déclarations CSS */ }

selecteur₁
selecteur₂ { /* déclarations CSS */ }

Une piste à l'étude (la spécification de niveau 4 sur les sélecteurs) consiste à ajouter un nouveau combinateur >> (dont la forme s'approche du combinateur des éléments fils) :

selecteur₁ >> selecteur₂ { /* déclarations CSS */ }

Exemples

CSS

li {
  list-style-type: disc;
}

li li {
  list-style-type: circle;
}

HTML

<ul>
  <li>
    <div>Élément 1</div>
    <ul>
      <li>Sous-élément A</li>
      <li>Sous-élément B</li>
    </ul>
  </li>
  <li>
    <div>Élément 2</div>
    <ul>
      <li>Sous-élément A</li>
      <li>Sous-élément B</li>
    </ul>
  </li>
</ul>

Résultat

Spécifications

Compatibilité des navigateurs