CSS-də unikal id-ə görə element seçimi

Artıq bildiyiniz kimi, siniflər bir qrup elementə təyin etmək üçün nəzərdə tutulub. Siniflərlə yanaşı, elementləri həmçinin unikal element identifikatoru təşkil edən id-ə görə də seçmək olar. Unikallıq o deməkdir ki, əgər səhifədə artıq bu cür id-i olan bir element varsa, eyni id-i olan başqa bir element olmamalıdır.

Unikal identifikator, içində bizim düşündüyümüz adın yazıldığı id atributu ilə təyin olunur. Gəlin, məsələn, iki blok düzəldək. Birincinə id dəyəri kimi block1, ikinciyə isə block2 təyin edək:

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

Müəyyən edilmiş id-i olan elementə müraciət etmək üçün # simvolunu və bizim düşündüyümüz adı yazmaq lazımdır, belə:

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

id atributu elementin unikallığını vurğulamaq lazım olduqda istifadə olunur. Siniflər isə, hətta indi bir dənə olsa belə, belə elementlərin çox ola biləcəyi gözləniləndə istifadə olunur.

Aşağıdakı kod verilmişdir:

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

elem1 blokunun məzmununu qırmızı rəngə, elem2 blokunun məzmununu yaşıl rəngə, elem3 blokunun məzmununu isə mavi rəngə boyayın.