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

Especificación Estado Comentarios
Selectors Level 4
La definición de 'following-sibling combinator' en esta especificación.
Working Draft  
Selectors Level 3
La definición de 'general sibling combinator' en esta especificación.
Recommendation  

Compatibilidad entre navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 o anterior) 7 9 3
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)

 

Ver también