CSS ID Selector Uitleg

De ID selector laat een manier zien om stijlen te specificeren die onafhankelijk van de documentelementen is.

CSS ID selector

Op sommige punten lijkt de ID selector op de class selector, maar er zijn ook belangrijke verschillen.

Syntaxis

Eerst heeft de ID selector een #-teken - ook wel schaakteken of piepteken genoemd.

Zie hieronder de regels:

*#intro {vet:vet;}

Net als bij class selectors, kunnen in ID selectors wildcards worden genegeerd. Het voorbeeld kan ook worden geschreven als:

#intro {font-weight:bold;}

Het effect van deze selector zal hetzelfde zijn.

De tweede onderscheidend kenmerk is dat de ID selector de waarde van de class-eigenschap niet verwijst, maar zonder enige twijfel de waarde van het id-eigenschap.

Hier is een voorbeeld van een ID selector:

<p id="intro">Dit is een inleidingss段落.</p>

Probeer het zelf

Class selector of ID selector?

In het hoofdstuk over class selectors hebben we eerder uitgelegd dat je klassen aan meerdere elementen kunt toekennen. In het vorige hoofdstuk werd de klasse naam important toegepast op de p en h1-elementen, en deze kan ook worden toegepast op meer elementen.

Onderscheid 1: Kan alleen in het document worden gebruikt

In tegenstelling tot klassen, wordt een ID selector in een HTML-document maar één keer gebruikt en slechts één keer.

Onderscheid 2: Gebruik geen ID-woordenlijst

In tegenstelling tot class selectors, kunnen ID selectors niet gecombineerd worden gebruikt, omdat het ID-eigenschap geen woordenlijst gescheiden door spaties toestaat.

Onderscheid 3: ID kan meer betekenis bevatten

Zoals bij klassen, kan een ID onafhankelijk van een element worden gekozen. In sommige gevallen weet je dat er een specifieke ID-waarde in het document zal voorkomen, maar weet je niet op welk element deze zal verschijnen, dus wil je een独立的 ID-selector declareren. Bijvoorbeeld, weet je mogelijk dat er in een bepaald document een element met ID-waarde mostImportant zal zijn. Je weet niet of dit de belangrijkste zaak een paragraaf, een zinnenfragment, een lijstitem of een sectietitel is. Je weet alleen dat elke document zo'n belangrijke inhoud zal hebben, die kan voorkomen in elk element en maar één keer kan voorkomen. In dit geval kan je de volgende regel schrijven:

#mostImportant {kleur:rood; achtergrond:geel;}

Deze regel past bij de volgende elementen (deze elementen mogen niet tegelijkertijd in hetzelfde document voorkomen, omdat ze dezelfde ID-waarden hebben):

<h1 id="mostImportant">Dit is belangrijk!
<em id="mostImportant">Dit is belangrijk!
<ul id="mostImportant">Dit is belangrijk!</ul>

Probeer het zelf uit:

Hoofdlettergevoelig

Let op, class en ID selectors kunnen hoofdlettergevoelig zijn. Dit hangt af van de taal van het document. HTML en XHTML definiëren class en ID waarden als hoofdlettergevoelig, dus de hoofdletters van class en ID waarden moeten overeenkomen met de waarden in het document.

Daarom zullen de volgende CSS en HTML elementen niet vet zijn:

#intro {font-weight:bold;}
<p id="Intro">Dit is een inleidingss段落.</p>

Omdat de letter i in hoofdletters en kleine letters verschillend is, zullen de selectors de bovenstaande elementen niet matchen.