I selettori combinatori nei CSS3

Con questo articolo terminiamo la serie riguardante i selettori nella nuova specifica CSS. Gli articoli che compongono la serie sono i seguenti:

1. I selettori di attributo nei CSS3
2. Le pseudo-classi strutturali
3. Altre pseudo-classi

I combinatori

I combinatori presenti nella specifica del CSS3 sono quattro:

• Combinatore del discendente - Descendant
• Combinatore del figlio - Child (>)
• Combinatore dei fratelli adiacenti - Adiacent Siblings (+)
• Combinatore generale dei fratelli - General Siblings (~)

Analizzamoli nel dettaglio e, come sempre, forniamo anche alcuni esempi per vederli all'opera.

Combinatore del discendente - Descendant

Il selettore discendente è sicuramente quello più famoso e utilizzato dei quattro. Non è presente solo nella specifica 3 ma anche nelle precedenti versioni ed è utilissimo per evitare il più possibile le classi per assegnare stile agli elementi. Il combinatore seleziona un elemento che è discendente di un altro elemento. Vediamo però un brevissimo esempio per capirne il funzionamento.

div#container p { text-align: justify; color: black; }

Il codice precedente serve ad assegnare lo stile solo ai paragrafi contenuti nel div#container, lasciando inalterata il resto della pagina.

Combinatore del figlio - Child

Il combinatore child (>) consente di raggiungere un elemento che è figlio diretto dell'elemento padre. Nel seguente esempio:

p > a { font-weight: bold; text-decoration: underline; }

lo stile verrà assegnato solo ai link che sono contenuti direttamente nel paragrafo.

Non sono stati forniti esempi pratici per i primi due combinatori perchè essi sono stati ampiamente trattati nella Guida CSS di base.

Combinatore dei fratelli adiacenti - Adiacent Siblings

I combinatori siblings (fratelli) servono a scorrere in orizzontale l'albero del DOM assegnando le proprietà agli elementi che si trovano allo stesso livello di un elemento.

Il primo è il selettore adiacente è "+" che 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 proprietà

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 proprietà CSS

li + li { margin-left: 10px; color: green: }

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 in opera.

Combinatore generale dei fratelli - General Siblings (~)

L'ultimo combinatore (~) è una generalizzazione di quello visto in precedenza. Esso assegna una proprietà 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>

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

Analizziamo invece il seguente caso. Dato il codice seguente

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

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

notiamo che il primo h2 presente nel codice non viene stilizzato, mentre tutti gli altri sì. Questo succede perchè la proprietà viene assegnata solo agli elementi che sono fratelli e successori dell'elemento h3. Vediamo l'esempio.

Compatibilità con i browser

La compatibilità dei combinatori è, fortunatamente, migliore rispetto ai selettori presentati negli altri articoli. Nella seguente tabella è presentata la compatibilità con le varie versioni dei browser.

Come possiamo vedere abbiamo problemi di compatibilità solo con Internet Explorer 6, mentre con le altre versioni abbiamo garanzia di supporto anche se non completo. Alcune versioni vecchie dei browser infatti, garantiscono la compatibilità statica dei combinatori. Questo significa che tali selettori vengono interpretati solo se presenti al caricamento della pagina, mentre non vengono assegnati stili ad elementi aggiunti ad esempio tramite Javascript.