ID - CSS-trucs | CSS Almanac 2025

Met de #idselector kunt u een element targeten door te verwijzen naar het idHTML-attribuut. Vergelijkbaar met hoe klassekenmerken in CSS worden aangeduid met een "punt" ( .) voor de klassenaam, worden ID-kenmerken voorafgegaan door een "octothorpe" ( #), beter bekend als een "hekje" of "hekje".

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

ID-kenmerkwaarden moeten uniek zijn. HTML met twee of meer identieke ids wordt niet gevalideerd en zal onvoorspelbare resultaten opleveren. Als er twee dezelfde zijn, zal CSS nog steeds overeenkomen en beide stijlen. JavaScript zal echter bij het opvragen van een ID de eerste vinden en stoppen.

ID-selectors zijn buitengewoon krachtig. Ze hebben een zeer hoge specificiteit, meestal geschreven als (0, 1, 0, 0). Stijlen die ermee van toepassing zijn, overschrijven andere selectors die alleen tags of klassen gebruiken. Laten zien:

Kijk eens naar deze pen!

Een alinea met zowel een ID als een class-attribuut krijgt in strijd met CSS-regels; hoewel de class selector ( .reusable) zich onder de ID selector ( #unique) in de CSS bevindt (het zou over het algemeen de stijlen erboven in de “cascade” overschrijven), blijft de alinea rood omdat #uniquede blauwe kleur die door wordt ingesteld, overweldigd wordt .reusable. Een oneindig aantal klassen kan de specificiteit van de ID nooit verslaan (hoewel er ooit een bug was waarbij 256 klassen een ID versloegen).

Hoge specificiteit en uniekheid betekenen dat het gebruik van #ideen CSS "nucleaire optie" is: overbelast, inflexibel en onevenredig effectief. Het vermijden van de #idselector in CSS wordt als een best practice beschouwd: het verdient de voorkeur om in bijna alle gevallen een klasse te gebruiken.

Dat gezegd hebbende, hebben ID-attributen verschillende waardevolle toepassingen buiten CSS:

Biedt unieke hooks voor JavaScript
Elementen met idattributen kunnen worden getarget door ankertags, door het hrefattribuut in te stellen op de idwaarde, voorafgegaan door een #symbool. Als u op die ankerkoppeling klikt, wordt de huidige pagina opnieuw gefocust op het element met de overeenkomst id. Dit wordt een "fragment-ID" genoemd.
Voor echt unieke elementen in uw HTML, zoals formulierelementen, kunnen ID's handig zijn voor zaken als het koppelen van labels en inputs.

Nuttige Plaatsen

Een geldige #idkan niet beginnen met een cijfer en moet minimaal één teken lang zijn. Een groot deel van de Unicode zijn geldige tekens in een id.
id attributen en selectors zijn hoofdlettergevoelig en moeten exact overeenkomen in HTML, CSS en JavaScript