### 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
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>Star Wars - ze prélogie</h3> <h4>Personnages</h4> <ul> <li>Anakin Webwalker</li> <li>Padmé Amidala</li> <li>Yoda</li> </ul> <h4>Films</h4> <ol> <li>Le DOM fantôme <ul> <li>1999</li> <li>2 h 16 min</li> </ul> </li> <li>L'attaque des .com <ul> <li>2002</li> <li>2 h 22 min</li> </ul> </li> <li>La Revanche des Siths Web <ul> <li>2005</li> <li>2 h 20 min</li> </ul> </li> </ol> </body> </html>
Seule la partie body de la page est représentée. Les feuilles texte ne sont pas représentées.
Fichier CSS : styles.css
/* Sélection des ul précédés par un h3 */ h3 ~ ul { border: 1px solid red; }