ID - CSS-trikovi | CSS Almanah 2025

#idSelektor omogućuje ciljanje element upućivanjem na idHTML atribut. Slično kao što se atributi klase u CSS-u označavaju .s „točkom “ ( ) ispred naziva klase, ID atributi imaju prefiks s „oktoktorom“ ( #), poznatijim kao „hash“ ili „pound sign“.

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

Vrijednosti atributa ID trebaju biti jedinstvene. HTML s dva ili više identičnih ids ne provjerava i rezultirat će nepredvidivim rezultatima. Ako postoje dva ista, CSS će se i dalje podudarati i oblikovati oba. JavaScript će, međutim, prilikom upita za ID pronaći prvo i zaustaviti se.

Izbornici ID-a izuzetno su moćni. Imaju vrlo visoku specifičnost, općenito zapisanu kao (0, 1, 0, 0). Stilovi koji se primjenjuju nadjačavaju druge birače koji koriste samo oznake ili klase. Demonstrirati:

Pogledajte ovu olovku!

Daje se odlomak s atributom ID i class koji proturječi CSS pravilima; iako je birač klase ( .reusable) ispod selektora ID-a ( #unique) u CSS-u (obično bi u "kaskadi" nadjačao stilove iznad njega), odlomak ostaje crven jer #uniqueprevladava plavu boju koju postavlja .reusable. Beskonačna količina klasa nikada ne može pobijediti specifičnost ID-a (premda je svojedobno postojala greška u kojoj bi 256 klasa pobijedilo ID).

Visoka specifičnost i jedinstvenost znače da je uporaba #id„nuklearna opcija“ CSS-a: premoćna, nefleksibilna i nesrazmjerno učinkovita. Izbjegavanje #idselektora u CSS-u smatra se najboljom praksom: poželjno je koristiti klasu u gotovo svakom slučaju.

To je rečeno, ID atributi imaju nekoliko vrijednih namjena izvan CSS-a:

Pružanje jedinstvenih udica za JavaScript
Elementi s idatributima mogu se ciljati oznakama sidra, postavljanjem hrefatributa na idvrijednost, kojoj je prefiksan #simbol. Klikom na tu vezu usredotočit ćete trenutnu stranicu na element koji odgovara id. To se naziva "identifikator fragmenta".
Za uistinu jedinstvene elemente u vašem HTML-u, kao što su elementi obrasca, ID-ovi bi mogli biti korisni za stvari poput povezivanja labels i inputs.

Točke interesa

Važeće #idne može započeti brojem i mora sadržavati najmanje jedan znak. Veliki dio Unicodea važeći su znakovi u id.
id atributi i selektori razlikuju velika i mala slova i moraju se točno podudarati u HTML-u, CSS-u i JavaScript-u