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.