Selectores de hermanos generales
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 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
| Especificación |
|---|
| Selectors Level 4 # general-sibling-combinators |