Selectores de hermanos generales
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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