Selectores de hermanos generales

Resumen

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

Sintaxis

elemento ~ elemento { estilos }

Ejemplo

p ~ span {
  color: red;
}
<span>Este span no es rojo.</span>
<p>Aquí hay un párrafo.</p>
<code>Aquí hay algo de código.</code>
<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>

Especificaciones

Specification
Selectors Level 4
# general-sibling-combinators

Compatibilidad entre navegadores

BCD tables only load in the browser

Ver también