Sélecteurs descendant

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css
/* 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

css
selecteur1 selecteur2 {
  /* déclarations CSS */
}

Exemples

CSS

css
li {
  list-style-type: disc;
}

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

HTML

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

Specification
Selectors Level 4
# descendant-combinators

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Descendant combinator (A B)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Voir aussi