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.
/* Cible tous éléments <p> qui arrivent après un élément
<img>. */
img ~ p {
color: red;
}
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émentspan
qui est un voisin dep
est sélectionné. L'élémentp
est un descendant de.monTexte
, tout comme ses voisinsspan
. - Dans
.monTexte p ~ .monTexte span
, la cible du sélecteur estspan
qui est un descendant de.monTexte
. Dans ce cas,span
est sélectionné si.monTexte
est un voisin dep
; 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