Syntaxe S1
~ S2
p ~ ul {
margin-top: 0;
padding-left: 25px;
}
Le combinateur ~ permet de sélectionner les
éléments enfants qui sont précédés par un autre
élément, quelque soit sa place dans la file des précédents.
La sélection travaille donc sur des frères : des éléments qui ont le
même parent et qui sont situés au même niveau d'arborescence.
L'élément sélectionné est le deuxième de la règle de style.
p ~ ul { ... }
se lit : je cherche tous les éléments ul qui
sont précédés par un p quelque part dans la fraterie.
Les sélecteurs utilisés dans la règle peuvent être de n'importe quel type ( simples, d'attributs, des pseudo classes, des pseudo éléments).
L'exemple suivant entoure d'une bordure les éléments ul qui sont précédés par un élément h3.