CSS  »  Articoli  »  CSS 3 

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.

Altri articoli

Altre guide

Altre newsletter