CSS da id dan foydalanish

Id dan foydalanganda biz oldingi darslarda o'rgangan selektorlar bilan barcha manipulyatsiyalar mavjud.

1-Misol

Keling, quyidagi kodni olamiz.

<div id="block">
	<h2>Title</h2>
	<p>text</p>
	<p>text</p>
</div>

Idsi blockga teng elementdan h2 ni tanlaymiz va qizil rangga bo'yaymiz.

#block h2 {
	color: red;
}

Endi esa blockga teng idli elementdan p ni tanlaymiz va yashil rangga bo'yaymiz.

#block p {
	color: green;
}

Keling, quyidagi kodni olamiz.

<div id="block">
	<h2 class="header">Title</h2>
	<p>text</p>
	<p>text</p>
	
	<h3 class="header">Title</h3>
	<p>text</p>
	<p>text</p>
</div>

Idsi blockga teng bo'lgan element ichida joylashgan header classli elementlarni tanlaymiz va ularni qizil rangga bo'yaymiz.

#block .header {
	color: red;
}

Va endi biz idsi block bo'lgan element ichida joylashgan header classiga ega h2 sarlavhalarini tanlaymiz va ularni qizil rangga bo'yamiz.

#block h2.header {
	color: red;
}