Sélecteur d'adjacents indirects

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éments adjacents (siblings)

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.

Exemple : sélection d'adjacents indirects
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css