Attributo class

L'attributo class definisce una o più classi per l'elemento (per elemento si intende il tag).

Questo viene fatto per poi fare riferimento tramite CSS a un gruppo di elementi a cui è stata assegnata la stessa classe e applicare ad essi determinate proprietà (ad esempio, cambiare il colore del testo, la dimensione del carattere e così via).

Esiste anche l'attributo id, che similmente all'attributo class consente di selezionare elementi nella pagina HTML.

La differenza tra l'attributo class e l'attributo id è che class seleziona un gruppo di elementi (anche se assegnato a un solo elemento - in seguito può essere assegnato anche a un altro), mentre id seleziona un elemento univoco (non dovrebbero esserci altri elementi con lo stesso id nella pagina del sito, altrimenti ci sarà un conflitto).

Come capire cosa assegnare a un elemento - classe o id? La classe viene assegnata a quegli elementi che si ripetono sulle pagine del sito (per non scrivere più volte lo stesso codice CSS). Anche se attualmente questo elemento è unico, ma si ritiene che elementi simili possano apparire in futuro - assegnate a questo elemento una classe. Se invece si è sicuri che tale elemento sia unico - allora assegnategli un id. Sebbene attualmente ci sia una tendenza ad assegnare a tutti gli elementi una classe, e lasciare id per JavaScript, questa non è universalmente accettata.

È possibile assegnare più classi a un elemento, in questo caso vanno elencate separate da uno spazio.

I nomi delle classi devono essere composti da lettere inglesi, numeri, senza spazi (lo spazio separa le classi l'una dall'altra, al suo posto si può usare il trattino basso o il trattino). Le classi non dovrebbero iniziare con un numero (in HTML5 è già possibile, ma non funzionerà nei browser vecchi).

I nomi delle classi dovrebbero essere in lingua inglese (e non in russo, semplicemente con lettere inglesi!). I nomi dovrebbero essere significativi, riflettere l'essenza della classe.

Esempio

Assegniamo a tutti i paragrafi con classe test il colore rosso per il testo:

<p class="test">Paragrafo con classe test.</p>
<p>Paragrafo di controllo senza classe.</p>

.test {
	color: red;
}

Esempio . Più classi per un elemento

Qui assegniamo al primo paragrafo diverse classi - test1 e test2 (scriviamole separate da spazio). La classe test1 imposta il colore del testo a rosso, mentre la classe test2 imposta la dimensione del carattere a 20px. Al secondo paragrafo è stata data solo la classe test1 (questo paragrafo diventerà rosso), mentre al terzo paragrafo - la classe test2 (questo paragrafo avrà la dimensione del carattere di 20px). Il primo paragrafo, a cui sono state assegnate due classi, avrà contemporaneamente sia il colore rosso sia la dimensione del carattere a 20px:

<p class="test1 test2">Paragrafo con due classi test1 e test2.</p>
<p class="test1">Paragrafo con classe test1.</p>
<p class="test2">Paragrafo con classe test2.</p>
<p>Paragrafo di controllo senza classi.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Vedi anche

attributo id,
che definisce identificatori univoci per gli elementi