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 
  •  qui sont des descendants */
/* d'un 
       */
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
      
  
    • 
    
      Élément 1
      
    
        
      
      • Sous-élément A
        • 
      
      • Sous-élément B
        • 
    
      
  
      • 
  
    • 
    
      Élément 2
      
    
        
      
      • Sous-élément A
        • 
      
      • Sous-élément B
        • 
    
      
  
      •

    Résultat

    Spécifications

    Specification
    Selectors Level 4
    # descendant-combinators

    Compatibilité des navigateurs

    Voir aussi