Výber elementu podľa unikátneho id v CSS

Ako už viete, triedy sú určené, aby sa priradili skupine elementov. Okrem tried je možné tiež vyberať elementy podľa id, čo predstavuje unikátny identifikátor elementu. Unikátnosť znamená, že ak už máme na stránke element s takýmto id, nemal by existovať žiadny iný element s rovnakým id.

Unikátny identifikátor sa nastavuje pomocou atribútu id, do ktorého sa píše vymyslené meno. Poďme napríklad vytvoriť dva bloky. Prvému nastavíme id s hodnotou block1, a druhému - s hodnotou block2:

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

Ak sa chceme odkázať na element s daným id, treba napísať znak # a vymyslené meno, takto:

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

Atribút id sa používa v prípade, keď je potrebné zdôrazniť unikátnosť elementu. Triedy sa používajú vtedy, keď sa predpokladá, že takýchto elementov môže byť viac, aj keď je momentálne len jeden.

Daný je nasledujúci kód:

<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>

Zafarbite obsah bloku elem1 na červenú farbu, bloku elem2 - na zelenú, a bloku elem3 - na modrú.