Sélecteurs enfant

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 > sépare deux sélecteurs et cible seulement les éléments correspondant au second sélecteur qui sont des enfants directs des éléments ciblés par le premier sélecteur.

css
/* Les éléments 
  • qui sont des enfant d'un */ /*
      */ ul.mon-truc > li { margin: 2em; }
  • En comparaison, lorsque deux sélecteurs sont combinés à l'aide du sélecteur descendant, l'expression formée par la combinaison des deux sélecteurs cible les éléments correspondant au second sélecteur qui ont un parent de n'importe quel niveau qui correspond au premier sélecteur, quelque soit le nombre de « sauts » dans le DOM.

    Syntaxe

    selecteur1 > selecteur2 { déclarations CSS }
    

    Exemples

    CSS

    css
    span {
      background-color: white;
    }
    
    div > span {
      background-color: blue;
    }
    

    HTML

    html
    Premier span du div. Deuxième span, dans un span dans un div.
    Troisième span, en dehors de tout div.

    Résultat

    Spécifications

    Specification
    Selectors Level 4
    # child-combinators

    Compatibilité des navigateurs

    Voir aussi