CSS selektorlarining specificity'si qanday ishlaydi?

Savol

Agar bir nechta CSS qoidasi mavjud bo'lsa, brauzer qaysi biri qo'llanilishini qanday hal qiladi?

Qisqa javob

Specificity — selektorning "og'irligi". U qanchalik yuqori bo'lsa, qoida faylda e'lon qilingan tartibdan qat'i nazar shunchalik ustuvor bo'ladi (specificity teng bo'lgan holatdan tashqari — u yerda oxirgi qoida g'alaba qozonadi).

Batafsil javob

Specificity kategoriyalar bo'yicha hisoblanadi (yuqoridan pastga):

1. Inline stillar (style="...") — eng yuqori ustuvorlik.
2. ID-selektorlar (#header).
3. Klasslar, atributlar, psevdoklasslar (.btn, [type=text], :hover).
4. Teglar va psevdoelementlar (div, ::before).

Buni (ID, class, tag) uchligi sifatida hisoblash qulay: #nav .item → (1, 1, 0), bu esa .nav .item → (0, 2, 0)dan katta.

!important odatiy specificity'ni bosib o'tadi va juda kam hollarda ishlatilishi kerak — u debugni qiyinlashtiradi, chunki bashorat qilinadigan kaskadni buzadi.

Specificity teng bo'lganda CSS'da keyinroq e'lon qilingan (yoki keyinroq ulangan) qoida g'alaba qozonadi.

Misol

.card p { color: blue; }       /* (0, 1, 1) */
#article p { color: red; }     /* (1, 0, 1) — g'alaba qozonadi, chunki ID mavjud */
p { color: green; }            /* (0, 0, 1) — eng past ustuvorlik */

Qo'shimcha savollar

• Specificity teng bo'lganda qoidalar tartibi qanday ta'sir qiladi?
• Nega !important antipattern hisoblanadi?
• Specificity CSS o'zgaruvchilari va kaskad qatlamlari (@layer) bilan qanday ishlaydi?