Selettori combinatori o di relazione

Link copiato negli appunti

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 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. Non è presente solo nella specifica CSS3 ma anche nelle precedenti versioni ed è utilissimo per evitare l'abuso delle classi per assegnare stili agli elementi. Il combinatore seleziona un elemento che è discendente di un altro elemento. Vediamo un brevissimo esempio per capirne il funzionamento:

div#container p {color: red}

Il codice appena visto serve ad assegnare lo stile solo ai paragrafi contenuti nel div#container, ovvero ai paragrafi discendenti del div con id container. Nell'esempio, solo il primo paragrafo rispetta questa situazione, per cui sarà l'unico a presentare il testo in rosso. Per chiarezza, ecco il codice HTML:

<div id="container">
<p class="titolo">Questo testo è in un paragrafo discendente da un div con id <code>container</code> e sarà rosso.</p>
</div>
<div id="main">
<p>Questo testo è in un paragrafo discendente da un div con id <code>main</code> e non sarà rosso.</p>
</div>

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

Selettore di figli

Il selettore di figli (>) consente di selezionare un elemento che è figlio diretto dell'elemento padre. 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:

<body>
<p>Primo paragrafo</p>
<div>
<p>Secondo paragrafo</p>
</div>
<p>Terzo paragrafo</p>
</body>

Dei tre paragrafi solo il primo e il terzo sono figli diretti di body. Il secondo è invece figlio diretto di un elemento div. Tutti e tre, però, sono discendenti di body.

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

body > p {color: red}

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. La relazione si definisce collegando i due elementi con il segno +.

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. Questo è il titolo principale.</h1>
  <h2>1.1 Questo è il primo sottotitolo.</h2>
  <p>...</p>
  <h2>1.2 Questo è il secondo sottotitolo.</h2>
  <p>...</p>
</div>

Applicando la seguente regola

h1 + h2 {color: red; text-decoration: underline}

verrà selezionato solo il primo <h2> dato che è immediatamente adiacente al tag <h1>. Vediamo l'esempio pratico all'opera.

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 {margin-left: 10px; color: red}

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à.

Vediamo anche questo 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. Dato il codice HTML visto in precedenza

<div>
  <h1>1. Questo è il titolo principale.</h1>
  <h2>1.1 Questo è il primo sottotitolo.</h2>
  <p>...</p>
  <h2>1.2 Questo è il secondo sottotitolo.</h2>
  <p>...</p>
</div>

e applicando il codice CSS seguente

h1 ~ h2 {color: red; text-decoration: underline}

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

Analizziamo invece il seguente caso. Dato questo codice:

<div>
  ...
  <h2>Questo e' un sottotitolo h2</h2>
  <h3>Questo e' un sottotitolo h3</h3>
  ...
  <h2>Questo e' un sottotitolo h2</h2>
  <h3>Questo e' un sottotitolo h3</h3>
  ...
  <h2>Questo e' un sottotitolo h2</h2>
  <h3>Questo e' un sottotitolo h3</h3>
</div>

e la seguente regola

h3 ~ h2 {color: red; text-decoration: underline}

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. Vediamo l'esempio.

Tabella del supporto sui browser

Selettori combinatori
Selettore di discendenti	4.0+	1.0+	1.0+	1.0+	7.0+
Selettore di figli (>)	7.0+	1.0+	1.0+	1.0+	7.0+
Selettore di fratelli adiacenti (+)	7.0+	1.0+	1.0+	1.0+	7.0+
Selettore generale di fratelli (~)	7.0+	1.5+	2.0+	1.0+	9.0+