CSS да уникал id орқали элементни танлаш

Сизларга маълумки, синфлар элементлар гуруҳига берувчи бўлиб яратилади. Синфлардан ташқари, элементларни уникал идентификатори бўлмиш id орқали ҳам танлаш мумкин. Уникаллик деб, саҳифада бизда маълум бир id га эга элемент мавжуд бўлса, ўша id билан яна бирор элемент бўлмаслиги тушунилади.

Уникал идентификатор id атрибути орқали берилади, унинг қийматига биз тўйған номнимиз ёзилади. Масалан, келтирилганидек иккита блок яратайлик. Биринчисига id атрибутини block1 қиймати билан, иккинчисига эса block2 қиймати билан берайлик:

<div id="block1">
	<p>матн</p>
	<p>матн</p>
</div>
<div id="block2">
	<p>матн</p>
	<p>матн</p>
</div>

Берилган id га эга элементга мурожаат қилиш учун # белгисини ва биз тўйған нимизни ёзамиз, мана бу қандай:

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

id атрибути элементнинг уникаллигини таъкидлаш зарур бўлган ҳолларда ишлатилади. Синфлар эса, ҳозирда битта бўлса-да, ўхшаш элементлар кўп бўлиши мумкин бўлган вақтларда ишлатилади.

Келтирилган код:

<div id="elem1">
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>
<div id="elem2">
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>
<div id="elem3">
	<h2>Сарлавҳа</h2>
	<p>
		матн
	</p>
	<p>
		матн
	</p>
</div>

elem1 блокининг матнини қизил рангга, elem2 блокининг матнини яшил рангга, elem3 блокининг матнини esa кўк рангга бўянг.