Gli attributi CLASS e ID

Dall’HTML 4 sono stati introdotti due importanti attributi applicabili a qualsivoglia elemento html. Gli attributi sono: class e id.
ID assume un valore arbitrario, scelto dallo sviluppatore, purché esso sia univoco in tutto il documento. In altre parole l’id è un valore, alfanumerico, che permette di identificare un elemento all’interno del codice html. Un esempio è:

<p id='paragrafo'>
...
</p>

CLASS può assumere un valore stringa qualunque e differisce dall’id perché più elementi possono condividere lo stesso valore.
E’ quindi permesso definire:

<p class='blocco'> ... </p>
<div class='blocco'> ... </div>

Applicare questi attributi ai tag di una pagina html non muta il loro aspetto, ma ci permette innanzitutto di identificare gli elementi, classificarli e distinguerli tra loro.
In questo modo class e id diventano una delle chiavi principali per sfruttare al meglio le potenzialità dei fogli di stile.
Sarà possibile applicare una definizione di stile ad un singolo elemento grazie all’id, oppure a più elementi di tipo diverso grazie all’attributo class.
Negli esempi visti nella lezione precedente, non eravamo sufficientemente in grado di applicare uno stile solo ad un determinato elemento, bensì eravamo in grado di applicare un regola CSS a tutti gli elementi di uno stesso tipo o al massimo in relazione alla loro gerarchia (elemento discendente o figlio).

Selettore classe

Per identificare una classe si usa far precedere il nome da un semplice punto (.):

. nome_della_classe

Questa è la sintassi base.
Un selettore classe così definito può essere applicato a tutti gli elementi di un documento HTML. Vediamo quindi un esempio concreto del selettore classe:

.testo_rosso {
	color : red;
}
.testo_verde {
	color : green;
}

Analizziamo ora la seguente porzione di codice html, nel quale verranno definiti alcuni elementi che utilizzano le classi definite sopra:

<div>Questo è un div che non appartiene ad alcuna classe.</div>
<div class='testo_rosso'>Questo div appartiene alla classe testo_rosso.</div>
<div class='testo_verde'>Questo div appartiene alla classe testo_verde.</div>
<span class='testo_verde'>Anche questo span appartiene alla classe testo_verde!</span>

Il risultato finale è il seguente:

Nell’esempio, la classe testo_verde è stata applicata ad elementi di natura diversa come un div e uno span. Questo modo di operare ci fornisce un grado di personalizzazione e flessibilità molto alto al cospetto dei semplici selettori di elementi.

Esiste un secondo tipo di sintassi per il selettore di classe:

elemento.nome_della_classe

E’ una regola più restrittiva rispetto alla sintassi generica. Se infatti definiamo le seguenti regole CSS:

p.testo_rosso {
	color : red;
}
div.testo_verde {
	color : green;
}

Lo stile verrà applicato esclusivamente ai paragrafi che presentino attributo class=‘testo_rosso’ e ai div con class=‘testo_verde’.
In pratica se definiamo all’interno del codice html un paragrafo con classe ‘testo_verde’ questo non acquisirà lo stile definito nel CSS perché ‘testo_verde’ è riferito esclusivamente ad elementi div.

Questo secondo tipo di sintassi va usata solo se si pensa di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece si ritiene di doverla applicare a tipi diversi è necessaria la sintassi generica.

Selettore ID

La sintassi di un selettore ID risulta essere ancor più semplice di quella del selettore classe.

#nome_id

In questo caso è necessaria esclusivamente questa sintassi essendo per natura l’ID univoco all’interno del codice html,  specificare l’elemento al quale è associato l’id sarebbe superfluo.

Vediamo un esempio pratico, riprendendo il codice descritto per il selettore classe:

#testo_rosso {
	color : red;
}
#testo_verde {
	color : green;
}

Riscriviamo la porzione di codice html, utilizzando al posto dell’attributo class l’attributo id:

<div>Questo è un div che non appartiene ad alcuna classe.</div>
<div id='testo_rosso'>Questo div ha come ID testo_rosso.</div>
<div id='testo_verde'>Questo div ha come ID testo_verde.</div>

Il primo div non ha un id settato, mentre il secondo e il terzo hanno come id rispettivamente ‘testo_rosso’ e ‘testo_verde’. Il risultato nella finestra del browser è il seguente: