ID - Trucchi CSS | CSS Almanac 2025

Il #idselettore ti consente di scegliere come target un elemento facendo riferimento idall'attributo HTML. In modo simile a come gli attributi di classe sono indicati in CSS con un "punto" ( .) prima del nome della classe, gli attributi ID sono preceduti da un "ottotorpe" ( #), più comunemente noto come "cancelletto" o "cancelletto".

#header ( /* this is the ID selector */ background: #eee; )

I valori degli attributi ID devono essere univoci. HTML con due o più messaggi identici idnon viene convalidato e produrrà risultati imprevedibili. Se ce ne sono due uguali, CSS continuerà a corrispondere e ad applicare lo stile a entrambi. JavaScript tuttavia, durante la ricerca di un ID, troverà il primo e si fermerà.

I selettori ID sono estremamente potenti. Hanno una specificità molto elevata, generalmente scritti come (0, 1, 0, 0). Gli stili applicati con essi sovrascrivono altri selettori che utilizzano solo tag o classi. Dimostrare:

Dai un'occhiata a questa penna!

Un paragrafo con sia un ID che un attributo di classe viene fornito in contraddizione con le regole CSS; anche se il selettore di classe ( .reusable) è sotto il selettore di ID ( #unique) nel CSS (generalmente sovrascrive gli stili sopra di esso nella "cascata"), il paragrafo rimane rosso perché #uniquesopraffà il colore blu impostato da .reusable. Una quantità infinita di classi non può mai battere la specificità dell'ID (sebbene ci fosse un bug in una volta in cui 256 classi avrebbero battuto un ID).

Elevata specificità e unicità significano che l'utilizzo #idè una "opzione nucleare" CSS: sovralimentato, inflessibile e sproporzionatamente efficace. Evitare il #idselettore nei CSS è considerata una best practice: è preferibile utilizzare una classe in quasi tutti i casi.

Detto questo, gli attributi ID hanno diversi usi preziosi al di fuori dei CSS:

Fornire hook unici per JavaScript
Gli elementi con idattributi possono essere scelti come target dai tag di ancoraggio, impostando l' hrefattributo sul idvalore, preceduto da un #simbolo. Facendo clic su quel collegamento di ancoraggio, la pagina corrente verrà rimessa a fuoco sull'elemento con la corrispondenza id. Questo è chiamato "identificatore di frammento".
Per gli elementi davvero unici nel codice HTML, come elementi di modulo, gli ID potrebbero essere utili per cose come il collegamento labels e inputs.

Punti di interesse

Un valore valido #idnon può iniziare con un numero e deve essere lungo almeno un carattere. Gran parte dell'Unicode sono caratteri validi in un file id.
id attributi e selettori fanno distinzione tra maiuscole e minuscole e devono corrispondere esattamente in HTML, CSS e JavaScript