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

css
p ~ span {
  color: red;
}
html
<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 con navegadores

BCD tables only load in the browser

Ver también