Combinateur de voisins suivants

Le combinateur de voisins suivants (~) permet de séparer deux sélecteurs et de cibler toutes les instances du deuxième élément qui suivent le premier (qui ne sont pas nécessairement voisins immédiats) et qui partagent le même élément parent.

css
/* Cible tous éléments <p> qui arrivent après un élément
   <img>. */
img ~ p {
  color: red;
}

Syntaxe

css
/* L'espace entre le tilde (~) est optionnel mais est recommandé. */
element_anterieur ~ element_cible { propriétés de style }

Exemples

Utilisation du combinateur avec des sélecteurs simples

Cet exemple illustre l'utilisation du combinateur ~ avec deux sélecteurs simples (p et span).

html
<article>
  <span>Il n'est pas rouge parce qu'il apparaît avant tout paragraphe.</span>
  <p>Voici un paragraphe.</p>
  <code>Voici un extrait de code.</code>
  <span>
    Ce span est rouge parce qu'il apparaît après le paragraphe, même s'il y a
    d'autres nœuds entre les deux.
  </span>
  <p>Quoi qu'il en soit, gardez le sourire.</p>
  <h1>Rêver en grand</h1>
  <span>
    Quel que soit le nombre ou le type de nœuds intermédiaires, tous les span
    issues du même parent après un paragraphe sont rouges.
  </span>
</article>
<span>
  Ce span n'est pas rouge, car il ne partage pas de parent avec un paragraphe.
</span>
css
p ~ span {
  color: red;
}

Utilisation du combinateur avec des sélecteurs complexes

Cet exemple contient deux sélecteurs complexes, tous deux utilisant le combinateur de voisins généraux : .monTexte p ~ span et .monTexte p ~ .monTexte span.

  • Le premier sélecteur complexe, .monTexte p ~ span, correspond à tous les <span> qui viennent après un paragraphe si le <span> et le paragraphe partagent le même parent et ce parent ou un parent plus haut de ce parent a la classe .monTexte.
  • Le second sélecteur complexe, .monTexte p ~ .monTexte span, correspond à toutes les <span> qui sont un descendant de l'élément parent avec la classe .monTexte si cet élément est un voisin du paragraphe mentionné précédemment.

L'exemple ci-dessous montre que l'élément cible du sélecteur complexe doit partager le même parent que l'élément initial du sélecteur complexe.

html
<h1>Rêver en grand</h1>
<span>Et encore une fois, il s'agit d'une zone rouge !</span>
<div class="monTexte">
  <p>Voici un autre paragraphe.</p>
  <span>Un span bleu</span>
  <div class="monTexte">
    <span>Un span vert</span>
  </div>
</div>
css
.monTexte p ~ span {
  color: blue;
}

.monTexte p ~ .monTexte span {
  color: green;
}

Dans le HTML ci-dessus, les deux voisins de .monTexte p sont span et .monTexte. Le span vert est un descendant de la classe .monTexte, qui est un voisin de p.

  • Lorsque la cible du sélecteur est span, l'élément span qui est un voisin de p est sélectionné. L'élément p est un descendant de .monTexte, tout comme ses voisins span.
  • Dans .monTexte p ~ .monTexte span, la cible du sélecteur est span qui est un descendant de .monTexte. Dans ce cas, span est sélectionné si .monTexte est un voisin de p ; essentiellement, les deux sont imbriqués dans un parent de .monTexte.

Spécifications

Specification
Selectors Level 4
# general-sibling-combinators

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi