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
The definition of 'following-sibling combinator' in that specification.
Working Draft  
Selectors Level 3
The definition of 'general sibling combinator' in that specification.
Recommendation  

Compatibilidad entre navegadores

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

 

Ver también

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: alkaithil
 Última actualización por: alkaithil,