Combinateurs CSS

Vous savez déjà cibler des éléments avec des sélecteurs de type, de class et d'id. La compétence suivante : styliser un élément parce qu'il se trouve à un certain endroit par rapport à un autre — dans une section, seulement comme enfant direct, ou juste après un titre.

Qu'est-ce qu'un combinateur CSS ?

Un combinateur CSS est un symbole (ou un espace) placé entre deux sélecteurs. Il indique au navigateur comment ces deux parties doivent être liées dans l'arbre HTML. La gauche est la référence ; la droite reçoit les styles.

Quatre combinateurs en un coup d'œil

Apprenez d'abord les symboles, puis pratiquez chacun avec un court exemple.

Combinateur descendant (espace)

Un espace entre sélecteurs signifie : « fais correspondre le second sélecteur n'importe où à l'intérieur du premier ». La profondeur n'importe pas — petits-enfants et niveaux plus profonds correspondent aussi.

Quand les descendants aident

Utilisez le combinateur descendant pour un aspect partagé dans une zone : tous les paragraphes d'un article, tous les liens d'un nav. Si vous ne voulez que des enfants directs et que les correspondances profondes sont trop larges, passez au combinateur enfant.

Combinateur enfant (>)

Le > ne correspond qu'aux enfants directs. Un élément imbriqué plus profondément ne correspond pas.

Espace contre > en une image

Si le HTML est <ul class="menu"><li>One<ul><li>Nested</li></ul></li></ul>, alors .menu > li stylise seulement le li extérieur. Un descendant .menu li stylise l'extérieur et l'imbriqué.

Combinateur frère adjacent (+)

Le + correspond à l'élément qui vient immédiatement après sa référence sœur — même parent, porte voisine, aucun élément entre les deux.

Un motif courant

Beaucoup de mises en page veulent que le premier paragraphe après un titre ait un aspect légèrement différent (texte d'accroche). h2 + p cible ce voisin sans donner une class à chaque paragraphe.

Combinateur frère général (~)

Le ~ correspond à chaque frère ultérieur qui convient au second sélecteur — pas seulement le suivant immédiat. Ils doivent toujours partager le même parent.

+ contre ~

• h2 + p — seulement le paragraphe juste après le h2
• h2 ~ p — chaque p frère qui suit ce h2 (premier, deuxième, troisième…)
  Si un div s'interpose entre h2 et un p, h2 + p échoue pour ce p, tandis que h2 ~ p peut encore correspondre à des paragraphes frères ultérieurs.

Choisir un combinateur

• Préférez le descendant pour « tout de ce type dans cette région »
• Préférez l'enfant quand l'imbrication styliserait listes ou widgets non voulus
• Préférez le frère adjacent pour un motif voisin en une étape (titre → premier paragraphe)
• Préférez le frère général quand plusieurs pairs après un marqueur doivent partager un aspect
  Gardez les chaînes courtes pendant l'apprentissage. Les longues sont puissantes — et faciles à casser si le HTML change.

Essayez vous-même

1. Créez une petite page avec un <article> contenant un <h2>, un <p>, un <div> avec un autre <p> dedans, puis encore un <p> après le div.
2. Ajoutez article p { color: #334155; } et vérifiez que les deux paragraphes de l'article changent (descendant).
3. Passez à article > p { color: #0f766e; } et actualisez — seuls les paragraphes enfants directs gardent cette couleur ; le p imbriqué dans le div non.
4. Ajoutez h2 + p { font-weight: bold; } et vérifiez que seul le paragraphe immédiatement après le titre devient gras.
5. Optionnel : essayez h2 ~ p { max-width: 36rem; } et notez que chaque paragraphe frère après le titre reçoit le max-width.

Erreurs fréquentes

• Utiliser un descendant alors que vous vouliez un enfant — des widgets imbriqués héritent de styles destinés au niveau supérieur
• S'attendre à ce que h2 + p saute un élément entre le titre et le paragraphe — adjacent signifie immédiat
• Lire le combinateur à l'envers — les styles s'appliquent au sélecteur de droite, pas à la référence de gauche
• Mettre une virgule où vous vouliez un combinateur (h2, p groupe ; ne signifie pas « p après h2 »)
• Supposer que ~ exige des voisins collés — le frère général demande seulement « frère ultérieur »

Résumé

• Les combinateurs relient les sélecteurs par relation HTML : à l'intérieur, enfant direct, frère suivant ou frères ultérieurs
• Espace = descendant (toute profondeur) ; > = enfant direct seulement
• + = frère suivant immédiat ; ~ = tout frère ultérieur correspondant
• Les styles s'appliquent au sélecteur à droite du combinateur
• Choisissez le combinateur le plus serré qui exprime encore votre intention
• Entraînez-vous en remplaçant l'espace par > et en comparant + et ~ sur la même page