Den #idVelgeren tillater deg å målrette et element ved å referere til idHTML-attributtet. I likhet med hvordan klasseattributter er betegnet i CSS med en "periode" ( .) før klassenavnet, er ID-attributter prefikset med en "octothorpe" ( #), mer kjent som et "hash" eller "pundtegn".
#header ( /* this is the ID selector */ background: #eee; )ID-attributtverdier skal være unike. HTML med to eller flere identiske ids validerer ikke, og vil gi uforutsigbare resultater. Hvis det er to av det samme, vil CSS fortsatt matche og style begge deler. JavaScript vil imidlertid når du spør etter en ID, finne den første og stoppe.
ID-velgerne er ekstremt kraftige. De har en veldig høy spesifisitet, vanligvis skrevet som (0, 1, 0, 0). Stiler gjelder med dem overstyrer andre velgere som bare bruker koder eller klasser. Å demonstrere:
Et avsnitt med både ID og klasse-attributt blir gitt i strid med CSS-regler; selv om klassevalgeren ( .reusable) er under ID-velgeren ( #unique) i CSS (det vil generelt overstyre stiler over den i "kaskaden"), forblir avsnittet rødt fordi det #uniqueovervelder den blå fargen som blir satt av .reusable. En uendelig mengde klasser kan aldri slå spesifisiteten til ID-en (selv om det var en feil på en gang hvor 256 klasser ville slå en ID).
Høy spesifisitet og unikhet betyr at bruk #ider et CSS ”atomalternativ”: overdrevet, lite fleksibelt og uforholdsmessig effektivt. Å unngå #idvelgeren i CSS regnes som en best praksis: det er å foretrekke å bruke en klasse i nesten alle tilfeller.
Når det er sagt, har ID-attributter flere verdifulle bruksområder utenfor CSS:
- Tilbyr unike kroker for JavaScript
- Elementer med
idattributter kan målrettes med ankermerker, ved å settehrefattributtet tilidverdien, foran et#symbol. Ved å klikke på den ankerlinken vil den gjeldende siden fokuseres på elementet med samsvarendeid. Dette kalles en "fragmentidentifier". - For virkelig unike elementer i HTML-en din, for eksempel skjemaelementer, kan ID-er være nyttige for ting som å koble
labels oginputs.
Interessepunkt
- En gyldig
#idkan ikke starte med et tall og må inneholde minst ett tegn. En stor del av Unicode er gyldige tegn i enid. idattributter og velgerne er store og små bokstaver, og må samsvare nøyaktig på tvers av HTML, CSS og JavaScript
Nettleserstøtte
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Noen | Noen | Noen | Noen | Noen | Noen | Noen |