Combinateurs

Combinateur descendant

Le combinateur descendant — en général représenté par un seul espace ( ) — combine deux sélecteurs de sorte que les éléments choisis par le second sélecteur sont sélectionnés s'ils ont un élément ancêtre (parent, parent de parent, parent de parent de parent, etc...) qui correspond au premier sélecteur. Les sélecteurs qui utilisent un combinateur descendant sont appelés sélecteurs descendants.

body article p {
}

Dans l'exemple ci-dessous, nous sélectionnons uniquement l'élément <p> qui se trouve à l'intérieur d'un élément ayant la classe .boite.

<div class="boite"><p>Le texte est dans un .boite</p></div>
<p>Le texte n'est pas dans un .boite</p>

.boite p {
  color: red;
}

Combinateur enfant

Le combinateur enfant (>) est placé entre deux sélecteurs CSS. Il correspond uniquement aux éléments correspondant au second sélecteur qui sont les enfants directs des éléments correspondants au premier. Les éléments descendants plus bas dans la hiérarchie ne correspondent pas. Par exemple, pour sélectionner uniquement les éléments <p> qui sont des enfants directs des éléments <article> :

article > p {
  /* … */
}

Dans l'exemple ci-dessous, nous avons une liste ordonnée (<ol>) imbriquée à l'intérieur d'une liste non ordonnée (<ul>). Le combinateur enfant sélectionne uniquement les éléments <li> qui sont des enfants directs d'un <ul>, et leur applique une bordure supérieure.

<ul>
  <li>Élément non ordonné</li>
  <li>
    Élément non ordonné
    <ol>
      <li>Élément 1</li>
      <li>Élément 2</li>
    </ol>
  </li>
</ul>

ul > li {
  border-top: 5px solid red;
}

Dans l'exemple précédent, essayez de supprimer le > qui désigne le sélecteur comme un sélecteur enfant. Vous vous retrouvez avec un sélecteur descendant, et tous les éléments <li> ont une bordure rouge.

Combinateur de voisin adjacent

Le combinateur de voisin adjacent (+) est utilisé pour sélectionner quelque chose s'il est juste à côté d'un autre élément au même niveau de la hiérarchie. Par exemple, pour sélectionner tous les éléments <img> qui viennent juste après les éléments <p> :

p + img {
  /* … */
}

Un cas d'utilisation courant consiste à faire quelque chose avec un paragraphe qui suit un titre, comme dans l'exemple ci-dessous. Ici, nous sélectionnons tout paragraphe qui partage un élément parent avec un <h1>, et qui suit immédiatement ce <h1>.

<article>
  <h1>Un titre</h1>
  <p>
    Les légumes, c'est un plus pour vous, c'est pourquoi je vous demande de
    mettre davantage de chou-rave, ciboulette, daikon, amarante, tatsoi,
    tomatillo, melon, haricots azuki, ail.
  </p>

  <p>
    Feuilles de betterave, maïs, soko, endive, courge à gumbo. Persil, échalote,
    courgette, tatsoi, pousses de pois, fèves, chou vert, pissenlit, gombo,
    wakamé, tomate. Pissenlit, concombre, arachide, pois, cacahuète, soko,
    courgette.
  </p>
</article>

body {
  font-family: sans-serif;
}

h1 + p {
  font-weight: bold;
  background-color: #333333;
  color: white;
  padding: 0.5em;
}

Dans l'exemple précédent :

1. Essayez d'insérer un autre élément tel qu'un <h2> entre le <h1> et le <p>. Vous constatez que le paragraphe n'est plus sélectionné par le sélecteur et ne reçoit donc pas la couleur de fond et de premier plan appliquée lorsque l'élément est adjacent.
2. Modifiez maintenant le sélecteur h1 + p afin que le style spécial soit à nouveau appliqué au premier paragraphe.

Combinateur de voisin général

Si vous souhaitez sélectionner les voisins d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur de voisin général (~). Pour sélectionner tous les éléments <img> qui viennent n'importe où après les éléments <p>, nous ferions ceci :

p ~ img {
  /* … */
}

Dans l'exemple ci-dessous, nous sélectionnons tous les éléments <p> qui viennent après le <h1>, et même s'il y a aussi un <div> dans le document, le <p> qui vient après lui est sélectionné.

<article>
  <h1>Un titre</h1>
  <p>Je suis un paragraphe.</p>
  <div>Je suis un div</div>
  <p>Je suis un autre paragraphe.</p>
</article>

body {
  font-family: sans-serif;
}

h1 ~ p {
  font-weight: bold;
  background-color: #333333;
  color: white;
  padding: 0.5em;
}

Combiner les combinateurs avec les sélecteurs

Vous pouvez combiner n'importe lequel des sélecteurs que nous avons découverts dans les leçons précédentes avec des combinateurs afin de sélectionner une partie de votre document. Par exemple, pour sélectionner des éléments de liste avec une class de a qui sont des enfants directs d'un <ul>, essayez ce qui suit :

ul > li[class="a"] {
}

Prenez garde, cependant, lorsque vous créez de longues listes de sélecteurs qui sélectionnent des parties très spécifiques de votre document. Il est difficile de réutiliser les règles CSS puisque vous avez rendu le sélecteur très spécifique à l'emplacement de cet élément dans le balisage.

Il est souvent préférable de créer une classe simple et de l'appliquer à l'élément en question. Cela dit, votre connaissance des combinateurs est très utile si vous devez mettre en forme quelque chose dans votre document et que vous ne pouvez pas accéder au HTML, peut-être parce qu'il est généré par un CMS.

Résumé

C'est tout pour les sélecteurs, pour l'instant. Ensuite, nous vous proposons quelques tests que vous pouvez utiliser pour vérifier dans quelle mesure vous avez compris et retenu les informations que nous avons fournies sur les sélecteurs CSS.

• Précédent
• Aperçu : Bases de la mise en forme CSS
• Suivant