Selettore di fratelli generale in CSS

Il selettore di fratelli generale ~ consente di selezionare tutti gli elementi che si trovano dopo un determinato elemento all'interno dello stesso genitore.

Sintassi

cssselettore1 ~ selettore2 {
  
}

Esempio

Applichiamo uno stile a tutti i tag p che si trovano dopo i tag h2 e coloriamoli in rosso:

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

cssh2 ~ p {
  color: red;
}

Результат:

Esempio

Applichiamo uno stile a tutti i tag p che si trovano dopo gli elementi con classe .test, e coloriamoli in rosso:

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

css.test ~ p {
  color: red;
}

Результат:

Esempio

Applichiamo uno stile a tutti gli elementi con classe .elem, che si trovano dopo gli elementi con classe .test, e coloriamoli in rosso:

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

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

Результат:

Vedi anche