CSS ID Selectors

ID-selectors

ID-selectors kunnen specifieke stijlen toewijzen aan HTML-elementen met een specifieke id.

ID-selectors worden gedefinieerd met "#".

De onderstaande twee id-selectors, de eerste kan de kleur van het element definiëren als rood, de tweede definieert de kleur van het element als groen:

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

In de onderstaande HTML-code wordt de p-element met de id-eigenschap red rood weergegeven, terwijl de p-element met de id-eigenschap green groen wordt weergegeven.

<p id="red">Deze alinea is rood.</p>
<p id="green">Deze alinea is groen.</p>

Opmerking:De id-eigenschap mag in elke HTML-document slechts een keer voorkomen. Wil je weten waarom, raadpleeg dan XHTML: website reconstrucție.

ID-selectors en afgeleide selectors

In moderne lay-out wordt de id-selector vaak gebruikt om afgeleide selectors te bouwen.

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

Deze stijl wordt alleen toegepast op paragrafen die zich in elementen bevinden met de id sidebar. Dit element is waarschijnlijk een div of een tabelcel, hoewel het ook een tabel of een andere blokgrootte-element kan zijn. Het kan zelfs een inlijn-element zijn, zoals <em></em> of <span></span>, hoewel dergelijke gebruikswijzen onwettig zijn omdat het niet mogelijk is om een <p> in te voegen in een inlijn-element <span> (als je de reden vergeten bent, raadpleeg dan XHTML: website reconstrucție)

Een selector, meerdere toepassingen

Hoewel elementen die worden aangeduid als sidebar in een document slechts een keer mogen voorkomen, kan de id-selector als afgeleide selector meerdere keren worden gebruikt:

#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;
	}

Hierin wordt het p-element binnen sidebar duidelijk van andere p-elementen op de pagina afgezet, en het h2-element binnen sidebar wordt ook anders speciaal behandeld dan alle andere h2-elementen op de pagina.

Enkele Selectors

ID selectors kunnen ook zonder dat ze worden gebruikt om afgeleide selectors te maken, individueel functioneren:

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

Volgens deze regel zal het element met id 'sidebar' een zwarte stiprand van één pixel breed hebben, en er zal een binnenmarge van tien pixel breed zijn (padding, interne witruimte) omheen. Oude versies van Windows/IE-browsers kunnen deze regel misschien negeren, tenzij je specifiek de elementen definieert die deze selector horen bij:

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

Gerelateerde Inhoud

Als je dieper wilt leren over ID selectors, lees dan de geavanceerde tutorials van CodeW3C.com:CSS ID Selectors Uitleg.