ID - CSS-trikid | CSS-i almanahh 2025

#idValijat võimaldab teil sihtida element viitamine idHTML atribuut. Sarnaselt sellele, kuidas klassi atribuute tähistatakse CSS-is .klassi nime ees oleva punktiga ( #), on ID-atribuutide eesliide „oktotorp” ( ), sagedamini tuntud kui „räsi” või „ naelamärk ”.

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

ID atribuudi väärtused peaksid olema kordumatud. Kahe või enama identse ids-ga HTML- i ei kinnitata ja see annab ettearvamatuid tulemusi. Kui on kaks ühte ja sama, sobib CSS ikkagi mõlemaga. Kuid ID-d pärides leiab JavaScript esimese ja peatub.

ID valijad on äärmiselt võimsad. Neil on väga kõrge spetsiifilisus, tavaliselt kirjutatakse kujul (0, 1, 0, 0). Nendega rakendatavad stiilid alistavad muud valijad, mis kasutavad ainult silte või klasse. Demonstreerima:

Vaadake seda pliiatsit!

Nii ID kui ka klassi atribuudiga lõik antakse vastuolus CSS-i reeglitega; Kuigi klassi valija ( .reusable) on #uniqueCSS- is allpool ID-valijat ( ) (see alistaks „kaskaadis” üldiselt selle kohal olevad stiilid), jääb lõik punaseks, kuna #uniqueületab määratud sinise värvi .reusable. Lõputul hulgal klassidest ei saa kunagi ületada ID spetsiifikat (kuigi korraga oli viga, kus 256 klassi võitis ID-d).

Kõrge spetsiifilisus ja ainulaadsus tähendab, et kasutamine #idon CSS-i „tuumavõimalus”: liiga jõuline, paindumatu ja ebaproportsionaalselt tõhus. #idCSS-is valija vältimist peetakse parimaks tavaks: eelistatav on kasutada klassi peaaegu igal juhul.

Sellest hoolimata on ID-atribuutidel mitu väärtuslikku kasutust väljaspool CSS-i:

Unikaalsete konksude pakkumine JavaScripti jaoks
idAtribuutidega elemente saab sihtida ankrusiltide abil, määrates hrefatribuudi idväärtuseks, mille ees on #sümbol. Ankrulingil klõpsamine fookustab praeguse lehe vastava elemendiga uuesti id. Seda nimetatakse "fragmendi identifikaatoriks".
Teie HTML-i tõeliselt ainulaadsete elementide, näiteks vormielementide, jaoks võivad ID-d olla kasulikud näiteks labels-de ja linkide linkimiseks input.

Huvipunktid

Kehtiv #idei saa alata numbriga ja see peab olema vähemalt ühe tähemärgiga. Suur osa Unicode'i on kehtivad tähemärgid id.
id atribuudid ja valijad on tõstutundlikud ja peavad täpselt vastama HTML-i, CSS-i ja JavaScripti vahel