A B
Un 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.
Exemple
#nav a {
color: #fff;
font-weight: 600;
text-decoration: none;
}
footer a {
color: #a1a1aa;
font-size: 13px;
}<nav class="stage" style="display: flex; gap: 16px;">
<a href="#">Cours</a>
<a href="#">Documentation</a>
<a href="#">Tarifs</a>
</nav>
<footer style="display: flex; gap: 14px; margin-top: 12px;">
<a href="#">Conditions d’utilisation</a>
<a href="#">Confidentialité</a>
</footer>Définition et utilisation
#Le combinateur descendant est simplement un espace entre deux sélecteurs. L’écriture nav a signifie : chaque lien situé à l’intérieur de nav, qu’il en soit l’enfant, le petit-enfant, ou un élément imbriqué encore plus profondément.
Grâce à lui, le style dépend du contexte. Le même lien peut avoir une apparence différente dans la navigation (nav a) et dans le pied de page (footer a), sans ajouter de classe à chaque lien. La spécificité s’additionne sur toutes les parties : nav a vaut (0, 0, 2), et .menu a vaut (0, 1, 1).
Il est facile d’exagérer la longueur. Une chaîne comme .sidebar .menu ul li a est fragile : elle se casse à chaque changement de structure HTML et a un poids élevé, difficile à écraser. Deux niveaux suffisent généralement, et une classe sur l’élément lui-même réglera le reste.
Les navigateurs évaluent un tel sélecteur à partir de la droite : ils trouvent d’abord les éléments B, puis cherchent l’élément A parmi leurs ancêtres. Si vous voulez sélectionner seulement les enfants directs, utilisez le combinateur >.
Syntaxe
#A B { propriété: valeur; }Exemples de sélecteurs
#- Les trois éléments
spandans le cadre, à toute profondeur. L’élément hors de.demoreste gris. - Chaque
spanà l’intérieur d’un.lvlquelconque, c’est-à-dire le petit-enfant et l’arrière-petit-enfant. L’enfant se trouve hors de leur portée. - Seulement un
spandans un.lvlqui se trouve lui-même dans un autre.lvl. Il ne reste que l’arrière-petit-enfant. - Le cadre
.demoest aussi un élémentdiv, donc même l’enfant correspond. Chaque ancêtre compte, pas seulement le plus proche.
Exemples de sélecteurs en pratique
#.demo span
span dans le cadre, à toute profondeur. L’élément hors de .demo reste gris..demo span { background: #7c3aed; color: #fff; }.lvl span
span à l’intérieur d’un .lvl quelconque, c’est-à-dire le petit-enfant et l’arrière-petit-enfant. L’enfant se trouve hors de leur portée..lvl span { background: #7c3aed; color: #fff; }.lvl .lvl span
span dans un .lvl qui se trouve lui-même dans un autre .lvl. Il ne reste que l’arrière-petit-enfant..lvl .lvl span { background: #7c3aed; color: #fff; }div span
.demo est aussi un élément div, donc même l’enfant correspond. Chaque ancêtre compte, pas seulement le plus proche.div span { background: #7c3aed; color: #fff; }Plus d’exemples
#.prose h3 {
margin: 0 0 6px;
color: #c4b5fd;
}
.prose p {
margin: 0 0 8px;
}
.prose code {
padding: 1px 6px;
border-radius: 6px;
background: #27272a;
font-size: 13px;
}<article class="prose stage">
<h3>Qu’est-ce qu’un sélecteur ?</h3>
<p>Un sélecteur désigne les éléments qui doivent recevoir un style, par exemple <code>p</code> ou <code>.card</code>.</p>
<p>Ce contenu pourrait provenir de Markdown, donc il ne contient aucune classe.</p>
</article>Seul le conteneur a une classe. Tout ce qui est à l’intérieur se stylise par le contexte, sans ajouter de classe à chaque élément.
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
#- Gardez les sélecteurs courts : deux ou trois niveaux au maximum. Une chaîne plus longue signifie généralement que l’élément aurait besoin de sa propre classe.
- Le combinateur descendant fonctionne très bien avec du contenu que vous ne contrôlez pas, par exemple des articles issus de Markdown :
.prose a,.prose ul. - Quand le style ne doit concerner que le premier niveau d’imbrication, par exemple dans un menu avec un sous-menu, remplacez l’espace par
>.
Entrées associées
#- A > BLe 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.
- 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.
- &Permet d’écrire des règles à l’intérieur d’autres règles, comme en Sass. Le signe & y représente le sélecteur de la règle parente.
- SpécificitéLe poids d’un sélecteur, qui détermine quelle règle gagne lorsque plusieurs règles définissent la même propriété du même élément.
- .classeSélectionne les éléments qui ont la classe indiquée dans l’attribut class. Le sélecteur le plus utilisé pour styliser des composants.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.