MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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, en dehors par Safari.

Syntaxe

selecteur1 selecteur2 { /* déclarations CSS */ }
selecteur1 >> selecteur2 { /* 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

Spécification État Commentaires
Selectors Level 4
La définition de 'descendant combinator' dans cette spécification.
Version de travail Introduction du combinateur descendant >> en plus du combinateur blanc.
Selectors Level 3
La définition de 'descendant combinator' dans cette spécification.
Recommendation  
CSS Level 2 (Revision 1)
La définition de 'descendant selectors' dans cette spécification.
Recommendation  
CSS Level 1
La définition de 'contextual selectors' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
Forme >> Pas de support Pas de support Pas de support Pas de support Pas de support 10
Fonctionnalité Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple ? ? (Oui) ? ? ?

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, FredB
 Dernière mise à jour par : SphinxKnight,