CSS id valgfinder

Id-selektorer

Id-selektorer kan tildele specifikke stilarter til HTML-elementer med en bestemt id.

Id-selektorer defineres med '#'

De to id-selektorer nedenfor, den første kan definere elementets farve som rød, og den anden som grøn:

#red {color:red;}
#green {color:green;}

I det følgende HTML-kode vises p-elementet med id 'red' som rødt, mens p-elementet med id 'green' vises som grønt.

<p id="red">Denne afsnit er rød.</p>
<p id="green">Denne afsnit er grøn.</p>

Bemærk:Id-attributten kan kun optræde én gang i hver HTML-dokument. Vil du vide grunden, se XHTML: Webomstrukturering.

Id-selektorer og afledte selektorer

I moderne layout bruges id-selektorer ofte til at oprette afledte selektorer.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Denne stil vil kun anvendes på paragrafer, der optræder inden for elementer med id 'sidebar'. Dette element er sandsynligvis en div eller en tabelcelle, men det kan også være en tabel eller anden blokkomponent. Det kan endda være en indlejret komponent, som <em></em> eller <span></span>, men denne brug er ulovlig, fordi det ikke er tilladt at indlejre <p> i indlejrede elementer <span> (hvis du har glemt årsagen, se XHTML: Webomstrukturering）。

En selektor, flere anvendelser

Selvom elementer markeret som sidebar kun kan optræde én gang i dokumentet, kan denne id-selektor også bruges mange gange som en afledt selektor:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

Her er p-elementer i sidebar tydeligt forskellige fra andre p-elementer på siden, og h2-elementer i sidebar modtager også specielle behandling, der adskiller dem fra alle andre h2-elementer på siden.

Enkel valgfinder

ID valgfinder kan virke uafhængigt selvom den ikke bruges til at oprette afledte valgfindere:

#sidebar {
	border: 1px prikket #000;
	padding: 10px;
	}

Ifølge denne regel vil elementet med id 'sidebar' have en pixel bred sort prikket kant, og der vil være en kant af 10 pixel bred indre kant (padding, intern tomhed). Gamle versioner af Windows/IE browsere kan ignorere denne regel, medmindre du specifikt definerer den element, som denne valgfinder tilhører:

div#sidebar {
	border: 1px prikket #000;
	padding: 10px;
	}

Relateret indhold

Hvis du har brug for at lære mere om ID valgfinder, så læs CodeW3C.com's avancerede undervisning:CSS ID valgfinder detaljer.