Le combinateur ~
permet de séparer deux sélecteurs et de cibler un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent. Les deux éléments sont des fils d'un même parent Element
, voisins immédiats ou pas.
/* Parmi tous les éléments <img>, cibler tous
éléments <p> qui les suivent. */
img ~ p {
color: red;
}
Syntaxe
premier_element ~ second_element { propriétés de style }
Exemples
CSS
p ~ span {
color: red;
}
HTML
<span>Ici, ce n'est pas rouge.</span>
<p>Voici un paragraphe.</p>
<code>Un peu de code.</code>
<span>Et un autre span.</span>
<code>Encore du code</code>
<span>Ici aussi, c'est rouge</span>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
Selectors Level 4 La définition de 'following-sibling combinator' dans cette spécification. |
Version de travail | Ce combinateur est renommé en « subsequent-sibling combinator ». |
Selectors Level 3 La définition de 'general sibling combinator' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser