CSS id e class
Usa il selettore CSS ID per identificare un elemento HTML da stilizzare. Per più elementi usa il selettore class. Esempi pratici.
Nel capitolo precedente abbiamo parlato dei selettori. Ora parleremo dei selettori id e class, che sono i due selettori basati su attributi a cui ricorrerai più spesso quando stili una pagina web.
Questo capitolo spiega cosa fa ciascun selettore, come si scrive, in cosa differiscono e — altrettanto importante — quando scegliere l'uno o l'altro.
Selettore CSS id
Un selettore id punta al singolo elemento HTML il cui attributo id corrisponde al nome specificato. Poiché un id deve essere univoco all'interno di una pagina, un selettore id è pensato per stilizzare un elemento specifico, non un gruppo di elementi.
Sia nei fogli di stile interni che in quelli esterni, il selettore id si scrive con un cancelletto (#) seguito dal valore dell'id: #nome { ... }.
Esempio di selettore ID:
Selettore CSS ID per elemento HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Qui abbiamo assegnato al secondo paragrafo l'id blue (id="blue") e dichiarato il suo stile con la proprietà color — #blue { color: #1c87c9; } — all'interno della sezione <head>. Solo quell'elemento viene selezionato, quindi solo il secondo paragrafo diventa blu; il primo e il terzo mantengono il loro colore predefinito.
Un valore id non può contenere spazi e, per convenzione, non dovrebbe iniziare con una cifra. Apri l'esempio nell'editor per verificare che solo il secondo paragrafo abbia il colore #1c87c9.
Selettore CSS class
Un selettore class punta a ogni elemento il cui attributo class contiene il nome specificato. Usalo quando lo stesso stile deve essere applicato a più elementi — ad esempio, uno stile .warning condiviso da diversi avvisi, oppure uno stile .btn riutilizzato su molti pulsanti.
Sia nei fogli di stile interni che in quelli esterni, il selettore class si scrive con un punto (.) seguito dal nome della classe: .nome { ... }.
Esempio di selettore class:
Esempio di selettore CSS Class
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>Qui la stessa classe blue è applicata a due elementi diversi — un'intestazione e un paragrafo (class="blue") — e stilizzata una sola volta con .blue { color: #1c87c9; }. Sia l'intestazione che il terzo paragrafo diventano #1c87c9, mentre il paragrafo centrale (privo di classe) rimane invariato. Definire la regola una volta sola e riutilizzarla è esattamente lo scopo delle classi.
Più classi su un singolo elemento
Un elemento può avere più classi contemporaneamente. Elencale nell'attributo class separate da spazi e ogni regola corrispondente viene applicata:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
font-size: 20px;
}
.highlight {
background-color: #ffe69e;
}
</style>
</head>
<body>
<p class="text highlight">This paragraph is both larger and highlighted.</p>
</body>
</html>Questa componibilità è il motivo per cui le classi sono lo strumento principale di CSS: classi piccole e con un unico scopo possono essere combinate in modi diversi in tutta la pagina.
La differenza tra id e class
La distinzione fondamentale è l'unicità:
- Un id è univoco — ciascun elemento può avere un solo id e ogni pagina dovrebbe contenere un solo elemento con un dato id. Riutilizzare lo stesso id su più elementi produce HTML non valido e può compromettere script e funzioni di accessibilità che si aspettano id univoci.
- Una class è riutilizzabile — la stessa classe può comparire su molti elementi e un singolo elemento può avere molte classi.
| id | class | |
|---|---|---|
| Simbolo in CSS | # | . |
| Volte per pagina | una | illimitate |
| Per elemento | un id | molte classi |
| Uso tipico | un elemento unico (es. intestazione di pagina, ancora di navigazione) | stilizzazione ripetuta, componenti |
Gli id hanno anche maggiore peso nella cascade rispetto alle classi. Quando una regola con id e una regola con class puntano allo stesso elemento, la regola con id vince indipendentemente dall'ordine nel sorgente — vedi specificità CSS attraverso i selettori. Questo peso aggiuntivo è il motivo per cui molte guide di stile preferiscono usare le classi per la stilizzazione e riservano gli id ai link interni alla pagina (href="#section") e agli hook JavaScript.
Quale scegliere?
In pratica, usa le classi per la stilizzazione. Sono riutilizzabili, facili da sovrascrivere e mantengono la specificità bassa e prevedibile. Ricorri a un id solo quando hai genuinamente bisogno di un riferimento univoco a un elemento — per i link di frammento, le associazioni label/for nei moduli, o getElementById in JavaScript.