Dettagli del selettore id di CSS

Il selettore di ID CSS permette di specificare lo stile in modo indipendente dal documento dell'elemento.

Selettore di ID CSS

In alcuni aspetti, il selettore di ID è simile al selettore di classe, ma ci sono alcune differenze importanti.

Sintassi

Prima di tutto, il selettore di ID ha un simbolo # - noto anche come numero di scacchi o numero di pozzo.

Ecco le regole:

*#intro {grassetto:bold;}

Come il selettore di classe, nel selettore di ID possono essere ignorati i selettori di jolly. L'esempio precedente può essere scritto anche così:

#intro {font-weight:bold;}

L'effetto di questo selettore sarà lo stesso.

La seconda differenza è che il selettore di ID non cita il valore dell'attributo class, ma senza dubbio cita il valore dell'attributo id.

Ecco un esempio reale di selettore di ID:

<p id="intro">Questo è un paragrafo di introduzione.</p>

Prova da solo

Selettore di classe o selettore di ID?

Nel capitolo del selettore di classe abbiamo spiegato che è possibile assegnare una classe a un numero illimitato di elementi. Nel capitolo precedente, il nome della classe important è stato applicato agli elementi p e h1 e può essere applicato a più elementi.

Differenza 1: può essere utilizzato solo una volta nel documento

Diversamente dalla classe, in un documento HTML, il selettore di ID viene utilizzato una volta e solo una volta.

Differenza 2: non si può usare una lista di parole per l'ID

Diversamente dal selettore di classe, il selettore di ID non può essere combinato, poiché l'attributo ID non permette una lista di parole separata da spazi.

Differenza 3: l'ID può avere un significato più ampio

Simile a una classe, un ID può essere selezionato indipendentemente dall'elemento. In alcuni casi, si sa che nel documento apparirà un valore di ID specifico, ma non si sa su quale elemento apparirà, quindi si desidera dichiarare un selettore di ID indipendente. Ad esempio, si potrebbe sapere che in un documento specifico ci sarà un elemento con un valore di ID mostImportant. Non si sa se questa cosa più importante è un paragrafo, una frase, un elenco o un titolo di sezione. Si sa solo che ogni documento avrà questo contenuto più importante, che può apparire in qualsiasi elemento e che può apparire solo uno. In questo caso, si può scrivere una regola come questa:

#mostImportant {colore:red; sfondo:yellow;}

Questa regola corrisponderà ai seguenti elementi (questi elementi non possono apparire nello stesso documento contemporaneamente, poiché hanno lo stesso valore di ID):

<h1 id="mostImportant">Questo è importante!
<em id="mostImportant">Questo è importante!
<ul id="mostImportant">Questo è importante!</ul>

Prova personalmente:

Sensibile alle maiuscole e minuscole

Si prega di notare che i selettori di classe e id possono essere sensibili alle maiuscole e minuscole. Questo dipende dalla lingua del documento. HTML e XHTML definiscono i valori di classe e id come sensibili alle maiuscole e minuscole, quindi i valori di classe e id devono corrispondere ai valori corrispondenti nel documento.

Quindi, per il seguente CSS e HTML, l'elemento non diventerà grassetto:

#intro {font-weight:bold;}
<p id="Intro">Questo è un paragrafo di introduzione.</p>

Poiché le lettere i sono diverse per maiuscole e minuscole, i selettori non corrisponderanno agli elementi superiori.