De ID selector

We begonnen het selector-deel van deze handleiding met de breedst toepasbare selector, namelijk de selector die alle HTML elementen met gegeven tag(s) selecteert. Vervolgens bespraken we de meer specifieke class selector. Nu zullen we de specifiekst mogelijke selector invoeren, namelijk de ID selector. De ID selector richt zich op één en slechts één HTML element in een document.

Net als de class selector, selecteert de ID selector HTML elementen die een attribuut bevatten dat toegestaan is in (vrijwel) alle HTML tags. Dit is het ID attribuut. Zoals bekend, is de naam van een ID attribuut volgens de HTML standaard uniek binnen een HTML pagina, wat betekent dat er slechts één element binnen een document is met een gegeven ID naam. De ID selector selecteert dit ene element.

De naam van een ID selector is de naam van het ID attribuut voorafgegaan door het hash (#) teken. De naam van een ID selector gehoorzaamt dezelfde regels als de naam van een class selector, het enige verschil is dat het eerste teken in de naam van een ID selector een hashteken is in plaats van een punt. Laten we eens kijken hoe het werkt:

<style type="text/css">
#main-header {
	color: GreenYellow;
}
</style>

<h1 id="main-header">Hello, CSS!</h1>

Je ziet dat het bijna hetzelfde werkt als de class selector, maar het grootste verschil is dat er slechts één element met de gegeven ID naam mag bestaan, terwijl het aantal elementen met een zekere class naam geen beperking heeft.

In het algemeen kan je ook een class selector gebruiken in situaties waar een ID selector gebruikt wordt. Dus waarom zou je überhaupt voor een ID selector kiezen? In de eerste plaats maak je duidelijk dat de stijlregel slechts op een enkel element toepasbaar is. Vaak zijn dat unieke elementen in je document, zoals een titel, een menu, een inhoudsopgave, enz.

In de tweede plaats komt het vaak voor dat je element al een ID naam heeft. Dit is met name het geval als je JavaScript/ jQuery code gebruikt, waarin vaak naar elementen verwezen wordt via hun ID. In dat geval ligt een ID selector voor de hand.

ID selectors specifiek voor een element

Net als bij class selectors kan je ID selectors beperken tot een specifieke HTML tag door de tagnaam vóór de ID selector naam te zetten, als volgt:

h1#main-header {
	color: GreenYellow;
}

Als je dat doet selecteert de ID selector alleen een h1 (header) tag, met dien verstande dat er een h1 tag moet bestaan die het ID attribuut met de gegeven naam heeft. Hoewel de h1 prefix redundant is - want de ID naam is al uniek - wordt de constructie toch gebruikt als vanuit JavaScript gerefereerd wordt naar het ID attribuut. Ook kan een zekere redundantie de leesbaarheid van code vergroten.

Samenvatting

Met de ID selector word je pas echt specifiek. Per definitie richt deze zich slechts op één bepaald element in je HTML document. Je gebruikt hem in het algemeen voor de grote structurele eenheden op je pagina, zoals navigatie, een vaste illustratie aan de top van je pagina, de main body en zo voort.