ID - CSS-tricks | CSS Almanack 2025

Med #idväljaren kan du rikta in dig på ett element genom att referera till idHTML-attributet. På samma sätt som klassattribut betecknas i CSS med en "period" ( .) före klassnamnet, är ID-attribut prefixerade med en "octothorpe" ( #), mer allmänt känd som ett "hash" eller "pundtecken".

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

ID-attributvärden ska vara unika. HTML med två eller flera identiska ids valideras inte och kommer att ge oförutsägbara resultat. Om det finns två av samma kommer CSS fortfarande att matcha och utforma båda. JavaScript kommer dock att hitta det första och stoppa när du frågar efter ett ID.

ID-väljare är extremt kraftfulla. De har en mycket hög specificitet, vanligtvis skriven som (0, 1, 0, 0). Styles gäller för dem åsidosätter andra väljare som endast använder taggar eller klasser. Att demonstrera:

Kolla in den här pennan!

Ett stycke med både ID och klassattribut ges motstridande CSS-regler; även om klassväljaren ( .reusable) ligger under ID-väljaren ( #unique) i CSS (det skulle i allmänhet åsidosätta stilar ovanför den i "kaskaden"), förblir stycket rött eftersom det #uniqueöverväldigar den blå färgen som ställs in av .reusable. En oändlig mängd klasser kan aldrig slå ID: ns specificitet (även om det fanns ett fel på en gång där 256 klasser skulle slå ett ID).

Hög specificitet och unikhet innebär att användning #idär ett CSS ”kärnkraftsalternativ”: överdrivet, oflexibelt och oproportionerligt effektivt. Att undvika #idväljaren i CSS anses vara en bästa praxis: det är att föredra att använda en klass i nästan alla fall.

Med detta sagt har ID-attribut flera värdefulla användningsområden utanför CSS:

Tillhandahåller unika krokar för JavaScript
Element med idattribut kan inriktas med ankartaggar genom att ställa in hrefattributet till idvärdet, före en #symbol. Om du klickar på den ankarlänken kommer den aktuella sidan att fokuseras om på elementet med matchningen id. Detta kallas en "fragmentidentifierare".
För riktigt unika element i din HTML, till exempel formulärelement, kan ID: n vara användbara för saker som att länka labels och inputs.

Intressanta platser

En giltig #idkan inte börja med ett nummer och måste innehålla minst ett tecken. En stor del av Unicode är giltiga tecken i en id.
id attribut och väljare är skiftlägeskänsliga och måste matcha exakt mellan HTML, CSS och JavaScript