Izbira elementa po edinstvenem id-ju v CSS

Kot že veste, so razredi namenjeni dodeljevanju skupini elementov. Poleg razredov lahko elemente izbiramo tudi po id, ki predstavlja edinstven identifikator elementa. Edinstvenost pomeni, da če na strani že obstaja element s takim id, potem ne sme biti drugega elementa z enakim id.

Edinstveni identifikator se določi z atributom id, kjer zapišemo ime, ki smo si ga izmislili. Na primer, naredimo dva bloka. Prvemu določimo id z vrednostjo block1, drugemu pa z vrednostjo block2:

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

Za dostop do elementa z določenim id je potrebno napisati simbol # in ime, ki smo si ga izmislili, takole:

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

Atribut id se uporablja v primerih, ko je potrebno poudariti edinstvenost elementa. Razredi se uporabljajo, kadar se predvideva, da je takih elementov lahko veliko, tudi če je trenutno le eden.

Podana je naslednja koda:

<div id="elem1">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem2">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>
<div id="elem3">
	<h2>Title</h2>
	<p>
		text
	</p>
	<p>
		text
	</p>
</div>

Pobarvajte vsebino bloka elem1 v rdečo barvo, bloka elem2 - v zeleno, bloka elem3 pa v modro.