Le combinateur ~ permet de séparer deux sélecteurs et de cibler un élément si celui correspond au second sélecteur et est précédé d'un autre élément correspondant au premier sélecteur tout en partageant un élément parent commun (autrement dit, les deux éléments sont les fils d'un même parent Element).

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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple1121793
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Oui Oui Oui4 Oui Oui Oui

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, teoli, FredB
 Dernière mise à jour par : SphinxKnight,