CSS ID-selektorer detaljeret

ID-selektorer tillader at specificere stil uafhængigt af dokumentelementer.

CSS ID-selektor

I nogle henseender ligner ID-selektorer klasseselektorer, men der er også vigtige forskelle.

Syntaks

Først og fremmest har ID-selektoren en #-symbolet - også kendt som bræt- eller brølstreg.

Se nedenstående regel:

*#intro {font-weight: fed}

Som med klasseselektorer kan man ignorere stjerne-selektorer i ID-selektorer. Det foregående eksempel kan også skrives som:

#intro {font-weight:bold;}

Effekten af denne selektor vil være den samme.

Den anden forskel er, at ID-selektorer ikke refererer til værdien af class-attributten, men uden tvivl skal de referere til værdien af id-attributten.

Her er et eksempel på en faktisk ID-selektor:

<p id="intro">Dette er en introduktionsafsnit.</p>

Prøv det selv

Klasse- eller ID-selektor?

I kapitlet om klasseselektorer har vi tidligere forklaret, at man kan tildele klasse til flere elementer. I det forrige kapitel blev klassenavn important anvendt på p- og h1-elementer, og den kan også anvendes på flere andre elementer.

Forskel 1: Kun én gang i dokumentet

I modsætning til klasser vil en ID-selektor blive brugt én gang og kun én gang i et HTML-dokument.

Forskel 2: Kan ikke bruge ID-ordliste

I modsætning til klasseselektorer kan ID-selektorer ikke kombineres, fordi ID-attributten ikke tillader en liste af ord adskilt af mellemrum.

Forskel 3: ID kan indeholde mere mening

Lignende klasser kan vælges uafhængigt af elementer. I nogle tilfælde ved du, at der vil optræde en bestemt ID-værdi i dokumentet, men ved ikke, hvilket element den vil optræde på, så du vil erklære en uafhængig ID-vælger. For eksempel ved du måske, at der vil være en element med ID-værdien mostImportant i et givet dokument. Du ved ikke, om den vigtigste ting er en afsnit, en sætning, en listeindgang eller en sektionstitel. Du ved kun, at hver dokument har en sådan vigtig indhold, der kan optræde i ethvert element, og kun én gang. I dette tilfælde kan du skrive følgende regel:

#mostImportant {farve: rød; baggrund: guld}

Denne regel vil matche følgende elementer (disse elementer kan ikke optræde samtidig i samme dokument, fordi de har de samme ID-værdier):

<h1 id="mostImportant"Dette er vigtigt!
<em id="mostImportant"Dette er vigtigt!
<ul id="mostImportant">Vigtigt!</ul>

Prøv det selv:

Følsom over for store og små bogstaver

Bemærk, at klasse- og ID-selektorer kan være følsomme over for store og små bogstaver. Dette afhænger af dokumentets sprog. HTML og XHTML definerer klasse- og ID-værdier som følsomme over for store og små bogstaver, så klasse- og ID-værdierne skal matche de tilsvarende værdier i dokumentet.

Derfor vil elementerne ikke blive gjort federe for nedenstående CSS og HTML:

#intro {font-weight:bold;}
<p id="Intro">Dette er en introduktionsafsnit.</p>

Pga. forskellige stavelser af bogstaven i, vil selektorer ikke matche de ovenstående elementer.