Il selettore di una classe in CSS inizia con un punto (.) seguito da una stringa, come nel seguente esempio:
.classe {
/* regole css */
}Un selettore di una classe seleziona tutti gli elementi che hanno un attributo classe corrispondente a quello inserito. Ad esempio, questo elemento HTML:
<h1 class="titolo">Benvenuti!</h1>può essere selezionato con il seguente codice CSS:
.titolo {
font-size: 100px;
}Il nome di una classe può essere rappresentato da una qualsiasi parola che inizi con una lettera, un trattino (-) o un trattino basso (_). Si possono utilizzare anche i numeri, ma un numero non può essere il primo carattere o il secondo carattere dopo un trattino.
Volendo si potrebbe eseguire l’escape dei caratteri della classe, ottenendo dei selettori piuttosto strani:
.\3A \`\( {
/* seleziona gli elementi con class=":`(" */
}Un elemento può avere più di una classe:
<p class="introduzione giallo">
Questo paragrafo riceverà gli stili di .introduzione e .giallo
</p>Gli elementi con più classi assumeranno lo stile stabilito da tutte le regole CSS specificate per ognuna delle classi che l’elemento possiede. Si possono combinare anche più classi per selezionare specifici elementi:
/* seleziona solo gli elementi con entrambe le classi */
.introduzione.giallo {
font-weight: bold;
}Il seguente esempio mostra come i selettori a classe singola sono diversi dai selettori combinati:
È anche possibile limitare un selettore di classe a un solo elemento specifico, che viene chiamato “qualifica del tag”:
/* seleziona solamente i tag ul con la classe elenco */
ul.elenco {
text-color: red;
}Livello di Specificità
Un selettore di classe è considerabile più potente di un selettore di elementi (Es: a { }) ma meno potente di un selettore di ID (Es: #header { }). La specificità aumenta quando si combinano i selettori di classe o si limita il selettore ad un elemento specifico.
Classi CSS con JavaScript
Con JavaScript è possibile accedere e manipolare le classi di un determinato elemento utilizzando classList. Ad esempio possiamo aggiungere una classe:
document.getElementById('header').classList.add('navbar');Nel seguente esempio vediamo come aggiungere e rimuovere una classe CSS alla pressione di un bottone utilizzando qualche riga di JavaScript:
La libreria jQuery mette a disposizione altri metodi per lavorare con le classi, tra cui:
.addClass()– aggiunge una classe;.removeClass()– rimuove una classe;.toggleClass()– aggiunge/rimuove una classe;.hasClass()– controlla se ha una classe;