Selector de hermanos general en CSS

El selector de hermanos general ~ permite seleccionar todos los elementos que se encuentran después de un elemento dado dentro del mismo padre.

Sintaxis

cssselector1 ~ selector2 {
  
}

Ejemplo

Apliquemos estilos a todas las etiquetas p que se encuentren después de las etiquetas h2 y pintémoslas de color rojo:

html<div>
  <h2>texto</h2>
  <p>
    +
  </p>
  <p>
    +
  </p>
  <p>
    +
  </p>
</div>
<p>
  -
</p>

cssh2 ~ p {
  color: red;
}

Результат:

Ejemplo

Apliquemos estilos a todas las etiquetas p que se encuentren después de elementos con la clase .test y pintémoslas de color rojo:

html<div>
  <p class="test">
    texto
  </p>
  <p>
    +
  </p>
  <p>
    +
  </p>
</div>
<p>
  -
</p>

css.test ~ p {
  color: red;
}

Результат:

Ejemplo

Apliquemos estilos a todos los elementos con la clase .elem que se encuentren después de elementos con la clase .test y pintémoslos de color rojo:

html<div>
  <p class="test">
    texto
  </p>
  <p class="elem">
    +
  </p>
  <p>
    -
  </p>
  <p class="elem">
    +
  </p>
</div>
<p>
  -
</p>

css.test ~ .elem {
  color: red;
}

Результат:

Véase también