Sinf va identifikatorlar (ID) o'rtasidagi farqlarni bilasizmi?

HTMLda class va id selektorlari elementlarni tanlash va ularga uslublar yoki skriptlar qoʻllash uchun ishlatiladi.

Asosiy farqlar:

• Yagona boʻlish:
  • id butun HTML sahifasida yagona boʻlishi kerak. Har bir element faqat bitta idga ega boʻlishi mumkin, va sahifada bir xil idga ega ikki element boʻlmasligi kerak.
  • class sahifada bir necha marta ishlatilishi mumkin. Bir nechta elementlar bir xil classga ega boʻlishi mumkin, va bir element bir nechta klasslarga ega boʻlishi mumkin.
• Maxsuslik:
  • id classga nisbatan yuqori maxsuslik (ogʻirlik)ga ega. id orqali belgilangan uslub, class yoki teg orqali belgilangan uslubdan ustun boʻladi, agar yanada maxsusroq qoidalar boʻlmasa.
  • class iddan pastroq maxsuslikka ega, lekin teg selektorlaridan yuqoriroq.
• JavaScriptda foydalanish:
  • id odatda document.getElementById() yordamida DOMdan yagona elementni olish uchun ishlatiladi, bu tezkor kirish usulidir.
  • class odatda document.getElementsByClassName() yoki document.querySelectorAll() yordamida elementlar guruhini tanlash uchun ishlatiladi.

Misol:

HTML:

<div id="unique-element" class="styled-box">
  Yagona element
</div>
<div class="styled-box">
  Guruhning birinchi elementi
</div>
<div class="styled-box highlight">
  Guruhning ikkinchi elementi (qoʻshimcha klass bilan)
</div>

CSS:

#unique-element {
  /* Yuqori ustuvorlik bilan yagona element uchun uslub */
  color: red;
}

.styled-box {
  /* Guruh elementlari uchun uslub */
  border: 1px solid blue;
  padding: 10px;
}

.highlight {
  /* Ba'zi elementlar uchun qoʻshimcha uslub */
  background-color: yellow;
}

Taqqoslash jadvali:

Xususiyat	ID (Identifikator)	Class (Klass)
Yagona boʻlish	Sahifa boʻyicha yagona	Bir nechta foydalanish mumkin
Qoʻllash	Bir element faqat bitta IDga ega boʻlishi mumkin	Bir elementga bir nechta klasslar qoʻyilishi mumkin
Maxsuslik	Yuqori	Oʻrtacha
JSda foydalanish	getElementById()	getElementsByClassName(), querySelectorAll()
Maʼnosi	Yagona elementni aniqlash	Elementlarni umumiy xususiyatlar boʻyicha guruhlash

id va classni toʻgʻri ishlatish kodni tashkil qilish, uslublarni toza saqlash va skriptlar bilan samarali ishlash uchun muhimdir. id ni ehtiyotkorlik bilan faqat haqiqatan ham yagona elementlar uchun ishlatish, class ni esa bir nechta elementlarga taalluqli uslublar yoki elementlarni guruhlash uchun ishlatish tavsiya etiladi.