Selettore adiacente in CSS

Il selettore adiacente + permette di selezionare un elemento in base al suo vicino superiore.

Sintassi

cssselettore1 + selettore2 {
  
}

Esempio

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

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

cssh2 + p {
  color: red;
}

Результат:

Esempio

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

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

css.test + p {
  color: red;
}

Результат:

Esempio

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

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

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

Результат:

Vedi anche