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 h1 p li 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 titolo 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 maiuscolo 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