Combinateur de voisins suivants

Syntaxe

/* 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).

<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>

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.

<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>

.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

Compatibilité des navigateurs

Voir aussi

• Sélecteur de voisin direct