Sélecteurs enfant

par 3 contributeurs :

Résumé

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

sélecteur1 > sélecteur2 { style propriétés }

Exemples

span { background-color: white; }
div > span {
  background-color: DodgerBlue;
}

Lorsque appliqué au code HTML suivant :

<div>
  <span>Span 1. dans le div.
    <span>Span 2. dans le span qui est dans le div.</span>
  </span>
</div>
<span>Span 3. pas du tout dans le div</span>

Devrait donner le résultat suivant :

Span 1. dans le div. Span 2. dans le span qui est dans le div.
Span 3. pas du tout dans le div.

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base (Oui) (Oui) 7.0 (Oui) (Oui)
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ?

Voir également

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, FredB, tregagnon
Dernière mise à jour par : teoli,
Masquer la barre latérale