Selettori di base

Nel contesto dei CSS3 il modulo dedicato ai selettori è quello attualmente più stabile e maturo. Non solo la specifica ha quasi raggiunto lo status di raccomandazione ufficiale, ma l'intera gamma dei selettori previsti (salvo piccole eccezioni) gode del supporto di tutti i principali browser.

Trattandosi di un fondamento essenziale per il funzionamento dei CSS e per comodità didattica abbiamo inserito nella trattazione dei questa guida anche i selettori già presenti nelle versioni precedenti del linguaggio, selettori quindi già trattati nella Guida CSS di base.

Iniziamo dunque con i quattro selettori fondamentali.

Selettore universale

Il selettore universale è definito sintatticamente da un asterisco: *. La sua funzione è quella di selezionare tutti gli elementi presenti in un documento.

La seguente regola assegna pertanto il colore rosso al testo di qualsiasi elemento rappresentato nell'albero del documento:

* {color: red}

Ecco l'esempio.

Selettori di tipo

I selettori di tipo sono rappresentati dal nome di uno specifico elemento HTML. Servono a selezionare tutti gli elementi di quel tipo specifico presenti in un documento.

Osserviamo questo snippet di codice:

h1 {color: red}
p {color: green}
li {color: blue}

Con il selettore h1 selezioniamo tutti i titoli h1, con p tutti i paragrafi, con il selettore li tutti gli item di lista, a prescindere dal fatto che la lista sia ordinata o non ordinata. A ciascun elemento assegniamo un colore diverso per il testo, come si può constatare nell'esempio.

Selettori di classe

Ad ogni elemento HTML può essere assegnata una classe usando l'attributo class e assegnando ad esso un valore a nostra scelta:

<h1 class="titolo">Testo</h1>

È anche possibile assegnare ad un elemento più classi. È sufficiente definirle nel codice separandole con uno spazio:

<h1 class="titolo testata rosso">Testo</h1>

Una singola classe può essere assegnata a più di un elemento:

<h1 class="titolo">Testo</h1>
<h2 class="titolo">Testo</h2>

Nei CSS, per selezionare gli elementi a cui sia stata assegnata una classe, si utilizza questa sintassi:

.titolo {color: red}

Il nome della classe viene fatto precedere da un punto (.). La regola appena vista imposta il colore rosso per tutti gli elementi con classe titolo (esempio).

È anche possibile definire una regola che vada a limitare l'azione dei selettori di classe. In pratica, se assegniamo una classe a più elementi, possiamo creare una regola che agisca solo su certi tipi di elementi e non su altri. Riprendiamo e modifichiamo l'esempio appena visto. Questo il codice HTML:

<h1 class="titolo">Questo testo è in un <code>h1</code> con classe <code>.titolo</code> e sarà rosso.</h1>
<p class="titolo">Questo testo è in un paragrafo con classe <code>.titolo</code> e non sarà rosso perché la regola assegna il rosso solo ai titoli <code>h1</code> con classe <code>.titolo</code>.</p>
<p>Questo testo non è in un paragrafo con classe <code>.titolo</code> e non sarà rosso.</p>

E questo il CSS:

.titolo {color: red}

Modifichiamo questa parte così:

h1.titolo {color: red}

In questo modo selezioniamo solo gli elementi h1 con classe titolo. Ecco il risultato.

Rimane da valutare un terzo scenario, quello delle classi multiple.

Per il nuovo esempio abbiamo questo codice HTML:

<h1 class="titolo maiuscolo">Questo testo sarà rosso e in maiuscolo.</h1>
<p class="titolo">Questo testo è in un paragrafo con classe <code>.titolo</code> e non sarà rosso.</p>

E questo è il CSS:

.titolo.maiuscolo {color: red; text-transform: uppercase}

Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore (titolo e maiuscolo). Il testo del paragrafo non sarà rosso e maiuscolo perché presenta solo la classe titolo.

Selettori di ID

Anche id è un attributo universale in HTML. Significa che tutti gli elementi presenti nel documento possono avere un loro id. A differenza delle classi, però, uno specifico id può essere assegnato solo ad un elemento. Non possiamo quindi avere in un documento HTML una situazione del genere:

<h1 id="titolo"></h1>
<p id="titolo"></p>

Nei CSS, per selezionare un elemento cui sia stato assegnato un certo id, si usa questa sintassi, facendo precedere il valore dell'id dal simbolo del cancelletto (#):

#titolo

È anche possibile usare prima del cancelletto il nome dell'elemento:

h1#titolo

Nell'esempio l'elemento <h1 id="titolo"> avrà il testo rosso perché abbiamo impostato questa regola CSS:

#titolo {color: red}

Tabella del supporto sui browser

Selettori di base
Selettore universale (*)	8.0+ (con bug sulle versioni 6.0 e 7.0)	1.0	1.0	1.0	1.0
Selettori di tipo	4.0+	1.0	1.0	1.0	1.0
Selettori di classe	4.0+	1.0	1.0	1.0	1.0
Selettori di ID	4.0+	1.0	1.0	1.0	1.0