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!

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

 

Etiquetas y colaboradores del documento

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