Selector de hermanos general en CSS

El selector de hermanos general ~ permite seleccionar todos los elementos que se encuentran después de un elemento dado dentro del mismo padre.

Sintaxis

selector1 ~ selector2 {
	
}

Ejemplo

Apliquemos estilos a todas las etiquetas p que se encuentren después de las etiquetas h2 y pintémoslas de color rojo:

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

h2 ~ p {
	color: red;
}

Ejemplo

Apliquemos estilos a todas las etiquetas p que se encuentren después de elementos con la clase .test y pintémoslas de color rojo:

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

.test ~ p {
	color: red;
}

Ejemplo

Apliquemos estilos a todos los elementos con la clase .elem que se encuentren después de elementos con la clase .test y pintémoslos de color rojo:

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

.test ~ .elem {
	color: red;
}

Véase también

Selector de hijo,
que permite seleccionar elementos por anidamiento directo
Selector contextual,
que permite seleccionar un elemento por su padre
Selector de hermano adyacente,
que permite seleccionar un elemento por su vecino
Selector universal,
que permite seleccionar todos los elementos