Un sélecteur seul dit quel type d'élément cibler, mais ne dit rien de sa position par rapport aux autres. Les combinateurs comblent ce manque : ce sont les symboles qui décrivent la relation entre deux sélecteurs dans le HTML.
Ils transforment CSS en un outil capable de lire la structure d'une page, pas seulement ses balises ou ses classes prises isolément. Sans eux, il faudrait poser une classe sur chaque élément à cibler, même quand sa position suffirait à le désigner.
Définition
Un combinateur CSS est le symbole placé entre deux sélecteurs pour décrire la relation qui doit exister entre les éléments correspondants dans le HTML : contenu, parenté directe, ou position parmi des frères.
Les quatre combinateurs
CSS distingue quatre combinateurs, chacun avec un usage précis.
/* descendant : espace entre les sélecteurs */
article p {
line-height: 1.6;
}
/* enfant direct : chevron */
ul > li {
margin-bottom: 8px;
}
/* frère adjacent : plus */
h2 + p {
margin-top: 0;
}
/* frère général : tilde */
h2 ~ p {
color: #555;
}Le combinateur descendant, un simple espace, cible tout élément situé n'importe où à l'intérieur d'un autre, même à plusieurs niveaux de profondeur. Le combinateur enfant direct, écrit >, restreint la cible aux enfants immédiats, sans descendre plus loin dans l'arborescence.
Les combinateurs entre frères
Le combinateur frère adjacent, +, cible l'élément qui suit immédiatement un autre au même niveau, et seulement le tout premier qui suit. Le combinateur frère général, ~, cible tous les éléments qui suivent, pas seulement le premier. Dans l'exemple ci-dessus, h2 + p ne stylise que le paragraphe collé juste après un titre, alors que h2 ~ p stylise tous les paragraphes qui viennent après ce titre, même après plusieurs autres éléments intermédiaires.
| Combinateur | Symbole | Relation ciblée |
|---|---|---|
| Descendant | espace | N'importe où à l'intérieur |
| Enfant direct | > | Enfant immédiat seulement |
| Frère adjacent | + | Juste après, un seul élément |
| Frère général | ~ | Après, tous les éléments concernés |
Un piège fréquent : descendant contre enfant direct
Confondre nav a et nav > a est une erreur classique. Le premier cible tout lien à l'intérieur d'une navigation, même s'il est enfoui dans un sous-menu déroulant. Le second ne cible que les liens directement enfants de la navigation, sans toucher aux liens des sous-menus, ce qui change radicalement le résultat sur une navigation complexe.
Combinateurs et spécificité
Contrairement à un Sélecteur CSS comme la classe ou l'id, un combinateur n'ajoute rien au calcul de la spécificité. Seuls les sélecteurs qu'il relie comptent dans ce calcul. nav > a et nav a ont donc exactement le même poids en spécificité, même si leur comportement diffère radicalement selon la profondeur du HTML ciblé. Cette distinction devient utile en combinant un combinateur avec un Sélecteur d'attribut, par exemple pour cibler précisément les liens actifs à l'intérieur d'une navigation sans jamais alourdir la règle.
Questions fréquentes
Oui, un sélecteur comme section > h2 + p combine un enfant direct et un frère adjacent pour décrire une chaîne de relations précise entre plusieurs éléments.
Non, les combinateurs frères ne ciblent que les éléments qui suivent dans le HTML, jamais ceux qui précèdent. CSS ne permet pas de cibler un élément à partir de ce qui vient après lui de cette façon.
.bouton.actif ?Un sélecteur composé sans espace cible un seul et même élément qui cumule plusieurs conditions, tandis qu'un combinateur relie deux éléments différents dans le HTML selon leur position l'un par rapport à l'autre. Cette distinction aide à lire rapidement l'intention réelle d'un sélecteur complexe.