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.

/* Les éléments <li> qui sont des descendants */
/* d'un <ul class="mon-truc"> */
ul.mon-truc li {
  margin: 2em;
}

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.

Syntaxe

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  
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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Descendant combinator (A B)Chrome Support complet 1
Support complet 1
Support complet 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet OuiSafari Support complet 1WebView Android Support complet ≤37
Support complet ≤37
Support complet 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Chrome Android Support complet 18
Support complet 18
Support complet 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Firefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet 1Samsung Internet Android Support complet 1.0
A >> B syntax
Obsolète
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support 10 — 11.1WebView Android Aucun support NonChrome Android Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support 10 — 11.1Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi