Indice
I selettori di classe e ID definiscono le regole di stile che si applicano agli elementi HTML selezionati. Consentono di identificare sia singoli che i gruppi di elementi, senza dover dare per forza uno stile univoco a tutte le istanze di ogni singolo elemento.
I selettori Classe
Il selettore di classe viene utilizzato per identificare un gruppo di elementi HTML. Lo identifichiamo con un punto (.), seguito dal nome della classe.
/*Raggruppa gli elementi con il nome della classe articolo*/
.articolo{}
Questo selettore può anche rappresentare una classe specifica che viene applicata ad un solo tipo di elemento. Tale classe viene definita dichiarando il nome dell'elemento seguito dal punto e dal nome della classe.
/*Seleziona gli elementi del paragrafo <p> contenuti nella classe dal nome articolo*/
p.articolo{}
Classi specifiche rendono più semplice identificare l'uso di una classe, mentre le classi generali possono consentire un maggiore riutilizzo del codice.
Vogliamo ad esempio che il testo all'interno di alcuni elementi debba essere colorato, ma non per tutte le istanze di quegli elementi. Dovremo quindi aggiungere una regola generale di classe con una proprietà per il colore specificato.
.articolo{color: black;}
Questa regola dice che qualsiasi elemento il cui attributo classe ha il valore di
"articolo" sarà di colore nero, che sia un paragrafo, un div o un titolo.
<p class="articolo">Testo colorato di nero</p>
Se una regola di classe viene utilizzata da un solo tipo di elemento, possiamo definire invece una classe specifica. In questo modo è più facile capire dove viene utilizzato lo stile.
p.post{color: black;}
<p class="post">Testo dei paragrafi colorati di nero</p>
Una regola di classe specifica viene applicata al documento allo stesso modo di una
regola di classe generale, ma si occuperà solo degli elementi specificati.
È possibile applicare più di una regola di classe a un singolo elemento separando ogni nome di classe con uno spazio. Questo rende le regole di classe molto versatili e di aggiungere più stili ad un singolo elemento.
<p class="stile1 stile2">Testo con più classi di riferimento</p>
I selettori ID
Il selettore ID viene utilizzato per identificare un singolo elemento univoco. Funziona molto come il selettore di classe, ma si usa attraverso il simbolo del cancelletto (#) invece di un punto, inserendo l'attributo id anziché l'attributo class.
Così come per l'attributo class, id è un attributo generico che può essere applicato praticamente a qualsiasi elemento HTML. Fornisce un identificatore univoco per un elemento all'interno di un documento.
/*Seleziona l'elemento con l'identificativo testoHome*/
#testoHome{color: red;}
Come i selettori di classe, i selettori di identificazione possono essere qualificati con un elemento. Tuttavia, poiché dovrebbe esserci un solo elemento con un determinato ID, questo qualificatore aggiuntivo è considerato superfluo.
/*Seleziona l'elemento <p> con l'identificativo testoHome*/
p#testoHome{color: red;}
Nell'esempio che segue, l'ID corrisponde ad un unico elemento nel file HTML il cui attributo è impostato su quell'ID. Questo selettore può quindi essere usato al posto del selettore di classe se si intende applicare uno stile ad un singolo elemento.
/*Solo l'elemento errore avrà il colore rosso*/
#errore {color: red;}
Una regola ID viene applicata a un elemento utilizzando l'attributo id. Poiché l'attributo id deve essere univoco, ogni selettore ID può essere utilizzato solo su un elemento per pagina web.
Quindi il selettore ID specifica implicitamente lo stile di quell'elemento solo una volta all'interno di una pagina.
<p id="errore">Troveremo l'id errore solo su questo paragrafo e non su altri</p>
Conclusione
In molti casi, l'utilizzo delle classi è il metodo preferito nella selezione degli elementi nei CSS, perché le classi sono sia flessibili che riutilizzabili.
Gli id invece sono spesso utilizzati per elementi strutturali di un sito, come ad esempio l' #header o il #footer, poiché sono elementi con un ruolo univoco all'interno della pagina.
