Sélecteur de frère adjacent

Plongeons dans les sélecteurs de frères adjacents. Ces sélecteurs ciblent les éléments qui partagent le même parent et qui viennent immédiatement après l'élément sélectionné. Un sélecteur de frère adjacent est un sélecteur CSS qui sélectionne tous les éléments qui sont des frères d'un élément spécifié et qui lui sont immédiatement adjacents. Le sélecteur de frère adjacent est désigné par un signe plus (+) entre deux sélecteurs.

Syntaxe

former_element + target_element {
  /* propriétés de style */
}

Supposons que nous ayons cette structure HTML :

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

Pour styliser la balise <span> suivant immédiatement un paragraphe, vous utiliseriez le sélecteur de frère adjacent :

p + span {
   font-weight: bold;
}

Dans cet exemple, le "Adjacent span" aura une graisse de police grasse.