I selettori combinatori o di relazione

Una categoria fondamentale di selettori CSS è rappresentata dai cosiddetti combinatori (detti anche selettori di relazione). Hanno la funzione di mettere in relazione elementi presenti all'interno dell'albero del documento. Sono quattro:

Selettore	Simbolo
Selettore di discendenti
Selettore di figli	>
Selettore di fratelli adiacenti	+
Selettore generale di fratelli	~

Analizziamoli nel dettaglio.

Selettore di discendenti

Il selettore di discendenti è sicuramente quello più utilizzato dei quattro. Seleziona un elemento che è discendente di un altro elemento. Ricordiamo che un elemento è discendente di un altro se è contenuto al suo interno, a qualsiasi livello.

Sintassi ed esempi

Per impostare la relazione di discendenza, è sufficiente separare l'elemento antenato dal discendente con uno spazio. Ecco la sintassi di base:

antenato discendente {dichiarazioni;}

E vediamo un brevissimo esempio per capirne il funzionamento:

#contenitore p {color: white;}

Il selettore va letto per chiarezza da destra a sinistra. Il codice appena visto serve ad assegnare lo stile solo ai paragrafi (p) contenuti nel div #contenitore, ovvero ai paragrafi discendenti del div con id contenitore. Nell'esempio, solo il primo paragrafo rispetta questa situazione, per cui sarà l'unico a presentare il testo in bianco. Per chiarezza, ecco il codice HTML:

<div id="contenitore">
<p>...</p>
</div>
<div id="box">
<p>...</p>
</div>

Selettore di figli

Il selettore di figli (>) consente di selezionare un elemento che è figlio diretto dell'elemento padre.

Sintassi ed esempi

padre > figlio {dichiarazioni;}

Questo selettore è solo in apparenza simile al selettore di discendenti. La differenza sta nella relazione di discendenza tra gli elementi, che in questo caso deve essere di primo livello. Chiariamo con un esempio:

<div id="box">
<p>Primo paragrafo</p>
<div>
<p>Secondo paragrafo</p>
</div>
<p>Terzo paragrafo</p>
</div>

Dei tre paragrafi solo il primo e il terzo sono figli diretti del div con id #box. Il secondo è invece figlio diretto di un elemento div anonimo. Tutti e tre, però, sono discendenti del div con id #box.

Nel seguente esempio, dunque, solo il primo e il terzo paragrafo avranno il testo bianco:

#box > p {color: white}

Selettore di fratelli adiacenti

Il selettore di fratelli adiacenti serve a scorrere in orizzontale l'albero del DOM assegnando le regole CSS agli elementi che si trovano allo stesso livello di un altro elemento.

Sintassi ed esempi

La relazione si definisce collegando i due elementi con il segno +.

fratello + fratello adiacente {dichiarazioni;}

In pratica, questo tipo di selettore consente di assegnare uno stile all'elemento fratello immediatamente adiacente. Dato un codice HTML come il seguente:

<div>
<h1>1. Titolo principale h1.</h1>
<h2>1.1 Primo sottotitolo h2.</h2>
<p>...</p>
<h2>1.2 Secondo sottotitolo h2.</h2>
<p>...</p>
</div>

Applicando la seguente regola

h1 + h2 {color: white;}

verrà selezionato solo il primo <h2> dato che è immediatamente adiacente al tag <h1>.

Consideriamo, invece, il seguente codice HTML

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
</ul>

e la seguente regola CSS:

li + li {color: white;}

Cosa succederà? Il combinatore andrà a selezionare tutti quegli elementi che sono diretti fratelli del tag li e, scorrendo in orizzontale l'albero del DOM, solo il primo <li> non coinciderà con la proprietà.

Esempio.

Selettore generale di fratelli

L'ultimo combinatore (~) è una generalizzazione di quello visto in precedenza. Esso assegna uno stile a tutti gli elementi che sono fratelli.

Sintassi ed esempi

fratello ~ fratello {dichiarazioni;}

Dato il codice HTML visto in precedenza

<div>
<h1>1. Titolo principale h1</h1>
<h2>1.1 Primo sottotitolo h2</h2>
<p>...</p>
<h2>1.2 Secondo sottotitolo h2</h2>
<p>...</p>
</div>

e applicando questa regola CSS

h1 ~ h2 {color: white;}

andremo a selezionare tutti gli elementi <h2> dello stesso livello di <h1> indipendentemente dalla posizione che occupano.

Analizziamo invece il seguente caso. Dato questo codice:

<div>
...
<h2>Sottotitolo h2</h2>
<h3>Sottotitolo h3</h3>
...
<h2>Sottotitolo h2</h2>
<h3>Sottotitolo h3</h3>
...
<h2>Sottotitolo h2</h2>
<h3>Sottotitolo h3</h3>
</div>

e la seguente regola

h3 ~ h2 {color: white;}

notiamo che al primo h2 presente nel codice non viene applicato alcuno stile, mentre a tutti gli altri sì. Questo succede perché la regola viene assegnata solo agli elementi che sono fratelli e successori dell'elemento h3.

Esempio.