Element selecteren op unieke id in CSS

Zoals je al weet, zijn klassen bedoeld om ze aan een groep elementen toe te wijzen. Naast klassen kunnen elementen ook geselecteerd worden op id, wat een unieke identificatiecode van het element vertegenwoordigt. Met uniciteit wordt bedoeld dat als er op onze pagina al een element met zo'n id bestaat, er geen ander element met dezelfde id mag zijn.

De unieke identificatiecode wordt ingesteld met behulp van het attribuut id, waarin we een zelfverzonnen naam schrijven. Laten we bijvoorbeeld twee blokken maken. We geven het eerste een id met de waarde block1, en het tweede - met de waarde block2:

<div id="block1">
	<p>text</p>
	<p>text</p>
</div>
<div id="block2">
	<p>text</p>
	<p>text</p>
</div>

Om een element met een bepaalde id aan te spreken, moet je het symbool # en de door ons verzonnen naam schrijven, zoals dit:

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

Het attribuut id wordt gebruikt in het geval wanneer het nodig is de uniciteit van het element te benadrukken. Klassen worden gebruikt wanneer verwacht wordt dat er veel van dergelijke elementen kunnen zijn, zelfs als er momenteel maar één is.

Gegeven de volgende code:

<div id="elem1">
	<h2>Titel</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div id="elem2">
	<h2>Titel</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>
<div id="elem3">
	<h2>Titel</h2>
	<p>
		tekst
	</p>
	<p>
		tekst
	</p>
</div>

Kleur de inhoud van blok elem1 in rood, blok elem2 - in groen, en blok elem3 - in blauw.