CSSda aniqlik nima?

CSS-da maxsuslik, elementga qaysi uslub qoidasi qoʻllanilishini belgilovchi mexanizmdir, agar unga bir nechta qoidalar tatbiq etilsa.

Har bir selektor oʻzining maxsuslik balliga ega. Yuqori ball yuqori ustuvorlikni anglatadi.

Maxsuslik hisoblash selektor ichidagi quyidagi komponentlarning soniga asoslanadi (ahamiyatiga qarab):

• Yuzlar (1000): !important bilan belgilangan qoidalar (eng yuqori ustuvorlikka ega, ammo ularning foydalanilishi tavsiya etilmaydi).
• Yuzlar (100): Toʻgʻridan-toʻgʻri yozilgan inline uslublar (style atributida HTML tegiga yozilgan).
• Yuzlar (100): Identifikatorlar (masalan, #mening-elementim).
• Oʻnlar (10): Sinflar (masalan, .sinf), pseudoklasslar (masalan, :hover, :focus), atributlar (masalan, [type="text"]).
• Birlar (1): Element turlari (HTML teg nomlari, masalan, div, p), pseudoelementlar (masalan, ::before, ::after).
• Nol (0): Umumiy selektor (*), birikmalar (>, +, ~), ota-ona selektorlar (:not(), :is(), :where()) o'zlari maxsuslik qo'shmaydi, ammo ichida ta’sir qilishi mumkin.

Hisoblash misoli:

• p { ... } - Maxsuslik: 0-0-0-1
• .mening-sinfim { ... } - Maxsuslik: 0-0-1-0
• #mening-id { ... } - Maxsuslik: 0-1-0-0
• div.mening-sinfim { ... } - Maxsuslik: 0-0-1-1
• ul > li.sinf[data-id="1"] { ... } - Maxsuslik: 0-0-2-2 (li, ul = 2; .sinf, [data-id="1"] = 2)

Agar ikki qoidaning maxsusligi bir xil boʻlsa, CSS faylida pastda joylashgan qoidaga amal qilinadi.

Misol:

/* style.css fayli */
.mening-element {
  rang: ko‘k; /* Maxsuslik: 0-0-1-0 */
}

#element-id {
  rang: qizil; /* Maxsuslik: 0-1-0-0 */
}

.mening-element {
  font-weight: bold; /* Maxsuslik: 0-0-1-0, avvalgi shunday maxsuslikdagi qoidani yozib qo‘yadi */
}

Bu holda, element-id IDga ega elementning matni qizil bo‘ladi, va mening-element sinfiga ega elementning matni ko‘k va qalin bo‘ladi (ko‘k, #element-id ning yuqori maxsusligi sababli qizil bilan o‘rnini bosadi).

Maxsuslikni tushunish, CSS-ni bashoratli va oson saqlanadigan qilish uchun muhimdir. Ortib ketgan maxsuslikdan va !importantdan qoching, shunda uslublarni yaxshiroq boshqarishingiz mumkin.