Selettore di fratelli generale in CSS

Il selettore di fratelli generale ~ consente di selezionare tutti gli elementi che si trovano dopo un determinato elemento all'interno dello stesso genitore.

Sintassi

selettore1 ~ selettore2 {
	
}

Esempio

Applichiamo uno stile a tutti i tag p che si trovano dopo i tag h2 e coloriamoli in rosso:

<div>
	<h2>testo</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Esempio

Applichiamo uno stile a tutti i tag p che si trovano dopo gli elementi con classe .test, e coloriamoli in rosso:

<div>
	<p class="test">
		testo
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

Esempio

Applichiamo uno stile a tutti gli elementi con classe .elem, che si trovano dopo gli elementi con classe .test, e coloriamoli in rosso:

<div>
	<p class="test">
		testo
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

Vedi anche

Selettore di figlio diretto,
che consente di selezionare gli elementi per nidificazione diretta
Selettore discendente,
che consente di selezionare un elemento in base al suo genitore
Selettore di fratello adiacente,
che consente di selezionare un elemento in base al suo vicino
Selettore universale,
che consente di selezionare tutti gli elementi