Fratelli Adiacenti

Il combinatore di elementi adiacenti di pari livello, o fratelli adiacenti (adjacent sibiling) non è un selettore CSS da solo, ma un modo per combinare due selettori. Per esempio:

h1 + p {
  color: red;
}

Il segno più (+) è il combinatore di elementi adiacenti tra loro e sullo stesso livello, posizionato tra due selettori veri e propri (h1 e p). Tradotta, questa istruzione significa “selezionare qualsiasi tag paragrafo che si trovi direttamente dopo un tag h1, senza nulla tra i due tag“. Ecco un esempio in cui ciò si verificherebbe:

<div class="card">
  <h1>Titolo della card</h1>
  <p>Questo è il testo contenuto all'interno della card.</p>
</div>

Questo combinatore può tornare utile quando si utilizza un markup Html di tipo semantico e si ha la necessità di adeguare il CSS a determinati scenari in cui gli elementi sono uno direttamente accanto all’altro.