Classi e/o id

Un metodo molto utilizzato per distinguere e/o accumunare gli elementi all’interno dei documenti HTML consiste nell’utilizzare due strumenti fondamentali: id e classi.

Gli ID consentono di identificare univocamente qualsiasi elemento della pagina. Per sua definizione, è possibile assegnare un ID ad un solo elemento. Nel CSS è identificato dal carattere # anteposto al nome:

<div id="container"></div>

/* le due regole sono del tutto identiche */
#container { width: 960px; }
div#container { width: 960px; }

L’utilizzo degli ID è adatto soprattutto per la realizzazione del layout di pagina. Consente, infatti, di contraddistinguere univocamente le sezioni della pagina e di assegnarne lo stile senza problemi di conflitti.

Le classi consentono di assegnare uno stesso stile a più elementi, anche diversi tra loro. Per definizione, quindi, possono essere assegnate a più elementi della stessa pagina:

<p class="red">Lorem ipsum dolor sit amet.</p>
<span class="red">Lorem ipsum dolor sit amet.</span>

.red { color: red; }

Altra particolarità importante delle classi è la possibilità di assegnarne più di una allo stesso elemento:

<p class="red underline">Lorem ipsum dolor sit amet.</p>

.red { color: red; }
.underline { text-decoration: underline; }

Esempio.

Nell’utilizzo combinato di classi all’interno di un elemento, se una proprietà è utilizzata da più di una classe, verrà applicato il classico metodo “a cascata” per determinare quale di essa verrà applicata. In sostanza, quindi, verrà assegnata la proprietà contenuta nell’ultima classe inserita, partendo da sinistra:

<p class="red blue">Lorem ipsum dolor sit amet.</p>

.red { color: red; }
.blue { color: blue; }

Nell’esempio appena visto, quindi, verrà assegnato il colore blu al paragrafo.

Esempio.

Utilizzo combinato di ID e Classi

ID e classi possono essere utilizzati contemporaneamente all’interno dello stesso elemento. Concettualmente non ci sarebbe utilità di assegnare anche una classe quando si utilizza l’ID dato che tutte le proprietà della classe potrebbero essere tranquillamente assegnate all’ID. Per non dover riscrivere porzioni di codice del tutto identiche e quindi per ottimizzare il foglio di stile è consigliabile, però, assegnare anche le classi all’elemento:

<div id="wrapper" class="red">Lorem ipsum dolor sit amet.</div>

.red { color: red; }
#wrapper { width: 100px; height:100px; border:1px solid; }

Esempio.

Specificità di ID e Classi

Gli ID hanno una specificità maggiore rispetto alle classi quindi le proprietà assegnate ad un ID avranno priorità rispetto a quelle contenute in una classe:

<p id="blue" class="red">Lorem ipsum dolor sit amet.</p>

#blue { color: blue; }
.red { color: red; }

Esempio.

Nell’esempio precedente, il colore del testo sarà blu perchè, come appena detto, l’ID ha specificità più alta indifferentemente dalla posizione nel foglio di stile.