CSSda noyob id orqali elementni tanlash

Bildigingizdek, klasslar guruh elementlarga tayinlash uchun mo'ljallangan. Klasslardan tashqari, elementlarni id orqali ham tanlash mumkin, bu elementning noyob identifikatoridir. Noyoblik deganda, agar sahifada ushbu id ga ega element mavjud bo'lsa, unda xuddi shu id ga ega boshqa element bo'lmasligi kerak.

Noyob identifikator id atributi orqali belgilanadi, uning qiymatida biz o'ylab topgan nom yoziladi. Keling, masalan, ikkita blok yarataylik. Birinchisiga id qiymatini block1, ikkinchisiga esa block2 qilib belgilaymiz:

html<div id="block1">
  <p>matn</p>
  <p>matn</p>
</div>
<div id="block2">
  <p>matn</p>
  <p>matn</p>
</div>

Belgilangan id ga ega elementga murojaat qilish uchun # belgisini va biz o'ylab topgan nomni yozish kerak, mana shu tarzda:

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

html<div id="elem1">
  <h2>Sarlavha</h2>
  <p>
    matn
  </p>
  <p>
    matn
  </p>
</div>
<div id="elem2">
  <h2>Sarlavha</h2>
  <p>
    matn
  </p>
  <p>
    matn
  </p>
</div>
<div id="elem3">
  <h2>Sarlavha</h2>
  <p>
    matn
  </p>
  <p>
    matn
  </p>
</div>