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