Combinateur frère suivant CSS (~)3

Définition et utilisation

combinateur frère suivant CSS (~) pour tous les élémentselement1apparaissant après element2.

element1 et element2 doit partager le même élément parent, mais element2 Ne doit pas suivre immédiatement après element1 après.

Exemple

Sélectionnez et définissez le style de tous les éléments <ul> qui suivent l'élément <p> et partagent le même élément parent :

p ~ ul {
  background-color: gold;
  border: 1px solid gray;
}

Essayer vous-même

Grammaire CSS

element1 ~ element2 {
  déclarations css;
}

Détails techniques

Version : CSS3

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette combinaison.

Chrome Edge Firefox Safari Opera
4.0 7.0 3.5 3.2 9.6