Selectarea elementului după id unic în CSS

După cum știți deja, clasele sunt destinate să fie atribuite unui grup de elemente. Pe lângă clase, puteți selecta elementele și după id, care reprezintă un identificator unic al elementului. Prin unicitate se înțelege că, dacă pe pagină există deja un element cu acest id, atunci un alt element cu același id nu ar trebui să existe.

Identificatorul unic este setat folosind atributul id, în care scriem numele ales de noi. Să facem, de exemplu, două blocuri. Primului să-i atribuim id cu valoarea block1, iar celui de-al doilea - cu valoarea block2:

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

Pentru a accesa un element cu un id specificat, trebuie să scrieți simbolul # și numele ales de noi, astfel:

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

Atributul id este folosit în cazul în care este necesar să se sublinieze unicitatea elementului. Clasele sunt folosite atunci când se presupune că pot exista multe astfel de elemente, chiar dacă în momentul de față există doar unul.

Este dat următorul cod:

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

Colorați conținutul blocului elem1 în culoare roșie, a blocului elem2 - în verde, iar a blocului elem3 - în albastru deschis.