Classe - Trucchi CSS | CSS Almanac 2025

Un selettore di classe in CSS inizia con un punto (.), In questo modo:

.class ( )

Un selettore di classe seleziona tutti gli elementi con un attributo di classe corrispondente.

Ad esempio, questo elemento:

Push Me

è selezionato e disegnato in questo modo:

.big-button ( font-size: 60px; )

Puoi assegnare a una classe qualsiasi nome che inizi con una lettera, un trattino (-) o un trattino basso (_). Puoi utilizzare numeri nei nomi delle classi, ma un numero non può essere il primo carattere o il secondo carattere dopo un trattino. A meno che non impazzisci e inizi a sfuggire ai selettori, il che può diventare strano:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Un elemento può avere più di una classe:


 This paragraph will get styles from .intro and .blue selectors.

Un elemento con più classi è in stile con le regole CSS per ogni classe. Puoi anche combinare più classi per selezionare elementi:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Questa demo mostra come i selettori di una classe sono diversi dai selettori combinati:

Puoi anche limitare un selettore di classe a un tipo specifico di elemento, che a volte viene chiamato "qualificazione tag":

ul.menu ( list-style: none; )

Specificità

Di per sé, un selettore di classe ha un valore di specificità di 0, 0, 1, 0. È "più potente" di un selettore di elementi (come :) a ( )ma meno potente di un selettore di ID (come #header ( )). La specificità aumenta quando si combinano i selettori di classe o si limita il selettore a un elemento specifico.

Accesso alle classi con JavaScript

Puoi leggere e manipolare le classi di un elemento classListin JavaScript. Ad esempio, l'aggiunta di una classe potrebbe essere come:

document.getElementById('italicize').classList.add('italic');

Questa demo mostra esempi di base di classListutilizzo:

jQuery dispone di metodi per interagire con le classi, compreso .addClass(), .removeClass(), .toggleClass(), e .hasClass().

Maggiori informazioni

Leggi le specifiche W3C per i selettori di classe.
Ulteriori informazioni sui nomi delle classi semantiche.
Ulteriori informazioni sulla specificità.
Scopri la differenza tra classi e ID.
Informazioni su più selettori di classe e combinazioni di selettori di classe / ID.
Informazioni sull'API .classList.
Informazioni sulla manipolazione delle classi in jQuery.