Combinateurs

En CSS, ce qui est écrit avant les accolades {} est un sélecteur, qui détermine quels éléments HTML seront concernés par la règle. Il est possible de combiner plusieurs sélecteurs pour former une règle plus précise. Ces combinateurs portent divers noms que tu n’auras pas forcément besoin de retenir : tu peux simplement imiter les exemples qui vont suivre.

Combinateur simple

En collant des sélecteurs ensemble, les éléments doivent répondre à toutes les conditions pour être ciblés. Par exemple, le sélecteur suivant cible uniquement les <p> qui ont la classe poem.

p.poem { ... }

Combinateur descendant

Séparer les sélecteurs d’un espace indique une relation de descendance :

article p { ... }

Ce sélecteur cible uniquement les <p> qui sont imbriqués dans un <article>. L’élément <p> peut être imbriqué à plusieurs niveaux de descendance, tant qu’il possède un <article> dans ses ancêtres.

<article>
  <div>
    <p>
      Je suis concerné par la règle CSS !
    </p>
  <div>
</article>
<p>Je ne suis pas concerné.</p>

Combinateur enfant

Plus strict, le > cible les éléments qui sont des descendants directs du parent.

article > p { ... }

<article>
  <p>
    Je suis un descendant direct !
  </p>
  <div>
    <p>
      Je ne suis pas un descendant direct.
    </p>
  <div>
</article>

Combinateur de frère

Le combinateur ~ cible les éléments frères, autrement dit tous ceux qui sont à la suite du premier élément et qui sont imbriqués au même niveau que lui.

h1 ~ p { ... }

<article>
  <h1>La règle ne me cible pas.</h1>
  <p>La règle me cible !</p>
  <h2>La règle ne me cible pas.</h2>
  <p>La règle me cible !</p>
</article>
<p>La règle ne me cible pas.</p>

Combinateur de frère adjacent

Plus strict que le ~, le combinateur + cible uniquement le frère situé juste après le premier élément.

h1 + p { ... }

<h1>La règle ne me cible pas.</h1>
<p>La règle me cible !</p>
<p>La règle ne me cible pas.</p>

Le sélecteur universel

Le signe * signifie « tous les éléments ». Il peut être intéressant à utiliser avec des combinateurs. Par exemple, h1 + * cible n’importe quel élément qui suit directement un <h1>, tandis que article > * cible tous les enfants d’un <article>.