A > B
Le signe > sélectionne les éléments B qui sont des enfants directs de l’élément A, c’est-à-dire situés exactement un niveau plus bas.
Exemple
#.menu > li {
margin-bottom: 6px;
font-weight: 700;
color: #fff;
}
.menu ul {
margin: 4px 0 0;
font-weight: 400;
color: #a1a1aa;
}<ul class="menu stage" style="margin: 0; padding: 12px 12px 12px 30px;">
<li>Cours
<ul>
<li>HTML et CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Documentation</li>
</ul>Définition et utilisation
#Le combinateur enfant > restreint le combinateur descendant à un seul niveau. L’écriture .menu > li sélectionne uniquement les éléments dont le parent est .menu. Il ignore les éléments d’un sous-menu imbriqué, car leur parent est une autre liste.
C’est un bon choix quand des composants s’imbriquent les uns dans les autres. La règle .card > p n’affectera pas les paragraphes d’une autre carte intégrée à l’intérieur, et .grid > * ne touchera que les éléments de la grille, pas leur contenu.
Le signe > lui-même ne pèse rien, la spécificité se calcule de la même façon qu’avec un espace. Les espaces blancs autour de lui sont facultatifs : ul>li et ul > li fonctionnent de façon identique, même si la seconde écriture est plus lisible.
Gardez à l’esprit que le navigateur peut ajouter lui-même des éléments à l’arbre. Dans un tableau écrit sans <tbody>, les lignes se retrouvent quand même dans un <tbody> créé automatiquement, donc table > tr ne fonctionnera pas, mais table > tbody > tr si.
Syntaxe
#A > B { propriété: valeur; }Exemples de sélecteurs
#- Seulement le
spansitué directement dans le cadre. Le petit-enfant et l’arrière-petit-enfant ont un autre parent. - Chaque
spandont le parent est.lvl. C’est le cas à la fois du petit-enfant et de l’arrière-petit-enfant. - Deux combinateurs déterminent un chemin exact : un
spandans un.lvlqui se trouve lui-même directement dans le cadre. Seul le petit-enfant correspond. - Tous les enfants directs du cadre, quel que soit leur type : le
spanet le premierdiv.lvlavec tout son contenu.
Exemples de sélecteurs en pratique
#.demo > span
span situé directement dans le cadre. Le petit-enfant et l’arrière-petit-enfant ont un autre parent..demo > span { background: #7c3aed; color: #fff; }.lvl > span
span dont le parent est .lvl. C’est le cas à la fois du petit-enfant et de l’arrière-petit-enfant..lvl > span { background: #7c3aed; color: #fff; }.demo > .lvl > span
span dans un .lvl qui se trouve lui-même directement dans le cadre. Seul le petit-enfant correspond..demo > .lvl > span { background: #7c3aed; color: #fff; }.demo > *
span et le premier div.lvl avec tout son contenu..demo > * { background: #7c3aed; color: #fff; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Utilisez
>dans les composants susceptibles de s’imbriquer, comme les menus, les cartes ou les listes de commentaires. Le style ne filtrera pas vers l’intérieur. - La paire
.conteneur > *est un moyen pratique de styliser tous les éléments d’une mise en page flex ou grid sans se préoccuper de leur contenu.
Entrées associées
#- A BUn espace entre deux sélecteurs sélectionne les éléments B situés n’importe où à l’intérieur de l’élément A, à n’importe quelle profondeur.
- A + BLe signe + sélectionne l’élément B qui se trouve immédiatement après l’élément A et partage le même parent que lui.
- A ~ BLe signe ~ sélectionne tous les éléments B qui se trouvent n’importe où après l’élément A et partagent le même parent que lui.
- *L’astérisque correspond à chaque élément. Il sert aux réinitialisations de styles et aux règles qui visent tous les enfants d’un conteneur donné.
- :first-childCorrespond à l’élément qui est le premier enfant de son parent.
- :has()Sélectionne un élément en fonction de ce qu’il contient ou de ce qui se trouve après lui. Permet de styliser un parent selon ses enfants.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.