Elemendi valimine unikaalse id järgi CSS-is

Nagu te juba teate, on klassid mõeldud neile omistamiseks elementide grupile. Klasside kõrval saab elemente valida ka id järgi, mis esindab elemendi unikaalset identifikaatorit. Unikaalsusega mõeldakse seda, et kui lehel on juba element sellise id-ga, siis teist sarnase id-ga elementi ei tohiks olla.

Unikaalne identifikaator määratakse kasutades atribuuti id, kuhu kirjutatakse meie poolt väljamõeldud nimi. Teeme näiteks kaks plokki. Esimesele määrame id väärtuseks block1, ja teisele - väärtuseks block2:

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

Elemendile pöördumiseks antud id-ga, tuleb kirjutada sümbol # ja meie poolt väljamõeldud nimi, nagu nii:

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

Atribuuti id kasutatakse juhul, kui on vaja rõhutada elemendi unikaalsust. Klaseid kasutatakse siis, kui eeldatakse, et selliseid elemente võib olla palju, isegi kui praegu on see üks.

Antud on järgmine kood:

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

Värvige ploki elem1 sisus punaseks, ploki elem2 - roheliseks, ja ploki elem3 - helesiniseks.