Selectores de hermanos generales

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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

Specification
Selectors Level 4
# general-sibling-combinators

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Subsequent-sibling combinator (A ~ B)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Ver también