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;
}
2-Misol
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;
}