CSS specificity: selektor "og'irligi"ni hisoblash

Qisqacha: Specificity — selektorning "og'irligi". U uchta son bilan yoziladi: (A,B,C). A — id'lar soni, B — class, atribut va pseudo-klasslar soni, C — teg va pseudo-elementlar soni. Sonlar chapdan solishtiriladi: bitta id har qancha class'dan og'ir. *, kombinatorlar va :where() — nol. :is(), :not(), :has() ichidagi eng og'ir selektorning og'irligini oladi. Inline stil va !important specificity emas — ular kaskadning boshqa bosqichlari.

Bu darsda

• Istalgan selektorning og'irligini (A,B,C) ko'rinishida hisoblaysiz.
• Ikki selektordan qaysi biri yutishini brauzerda ochmasdan aytasiz.
• :is(), :not(), :has() va :where() og'irlikka qanday ta'sir qilishini bilasiz.
• Nega inline stil, !important va meros specificity emasligini tushuntirasiz.
• Og'irlik urushining oldini olasiz va kerak bo'lsa .a.a hiylasini ishlatasiz.

Oldin bilishingiz kerak: Kaskad, Asosiy selektorlar va kombinatorlar, Atribut selektorlari, Mantiqiy pseudo-klasslar.

1. Nega bu kerak?

Kaskad darsidagi stajyorni eslang. Uning .narx qoidasi #asosiy span dan yutqazdi. Sababini bilasiz: id'li selektor "og'irroq". Lekin qanchalik og'irroq?

Stajyor endi .taom-karta .narx yozsa, yutadimi? main article p .narx yozsachi? Taxmin bilan yozsangiz, har safar brauzerni yangilab tekshirasiz. Hisoblashni bilsangiz, javobni oldindan bilasiz.

Specificity Olimpiada medallari jadvaliga o'xshaydi. Davlatlar avval oltin medal soni bo'yicha saralanadi. Bitta oltin medalli davlat nol oltin va ellikta kumush medalli davlatdan yuqori turadi. Oltinlar teng bo'lsagina kumush solishtiriladi, kumush ham teng bo'lsa — bronza. Selektorlarda id — "oltin", class — "kumush", teg — "bronza".

2. Uch ustun: A, B, C

2.1 Nima qaysi ustunga tushadi

Selektor og'irligi (specificity) — selektorning kaskaddagi kuchi. Dasturchilar orasida inglizcha "specificity" so'zi ko'p ishlatiladi, biz ham ikkalasini ishlatamiz. U uchta son bilan yoziladi: (A,B,C).

Atribut selektori class bilan bir ustunda. Atribut selektorlari darsida "og'irligi bo'yicha atribut selektori class selektoriga teng" degan edik — mana shu. [aria-current="page"] ham, .narx ham B ustuniga bittadan qo'shadi.

Chrome DevTools B ustunini "class-like" ("class'ga o'xshash"), C ustunini "type-like" ("tegga o'xshash") deb ataydi. Bu nomlarni dars davomida DevTools'da ko'rasiz.

2.2 Birinchi hisob — qadamma-qadam

Selektor: nav[aria-label="Asosiy menyu"] li > a:hover. Uni bo'laklarga ajratamiz:

1. Id bormi? Yo'q. A = 0.
2. Class, atribut, pseudo-klass: [aria-label="Asosiy menyu"] va :hover. B = 2.
3. Teg va pseudo-element: nav, li, a. C = 3.
4. Bo'sh joy va > — kombinatorlar, ular sanalmaydi.

Natija: (0,2,3). O'qilishi: "nol id, ikki class-o'xshash, uch teg".

2.3 Misollar

:hover bitta ikki nuqta bilan — pseudo-klass, B ustuni. ::first-line ikki ikki nuqta bilan — pseudo-element, C ustuni. Bu farqni Pseudo-elementlar darsida ko'rgan edingiz. Og'irlikda ham ular boshqa-boshqa ustunda.

html va :root bir xil elementni tanlaydi, lekin og'irligi har xil. Tuzilma pseudo-klasslari darsida ":root og'irroq" degan edik — mana raqamlari: teg C ustuniga, pseudo-klass B ustuniga tushadi.

Tekshirib ko'ring: Og'irlikni yozing (vergul bilan, bo'sh joysiz): nav a — [:0,0,2]; a[href^="https://"] — [:0,1,1]; #asosiy h1 + p — [:1,0,2]; .taom-karta p .narx — [:0,2,1].

3. Solishtirish: chapdan o'ngga

3.1 Medallar kabi

Ikki selektor quyidagi tartibda solishtiriladi:

flowchart TD
  S["Ikki selektor"] --> A{"A teng?"}
  A -->|"yo'q"| A2["A si katta yutadi"]
  A -->|"ha"| B{"B teng?"}
  B -->|"yo'q"| B2["B si katta yutadi"]
  B -->|"ha"| C{"C teng?"}
  C -->|"yo'q"| C2["C si katta yutadi"]
  C -->|"ha"| T["Yozilish tartibi hal qiladi"]

Nimaga qarang: keyingi ustunga faqat oldingisi teng bo'lganda o'tiladi. Uchala ustun ham teng bo'lsa, Kaskad darsidagi oxirgi bosqich ishlaydi — pastdagi yutadi.

Bu o'nlik sanoq emas. Eski maqolalarda "id — 100 ball, class — 10 ball, teg — 1 ball" degan hisobni uchratasiz. U noto'g'ri: 11 ta class 110 ball bo'lib, id'dan yutib chiqardi. Aslida (0,11,0) baribir (1,0,0) dan yengil — xuddi ellikta kumush bitta oltindan past turgani kabi.

Yana bir necha juftlik:

• (1,0,0) va (0,12,0) — birinchisi yutadi: A ustunida 1 > 0.
• (0,1,0) va (0,0,5) — birinchisi yutadi: B ustunida 1 > 0.
• (0,2,1) va (0,2,0) — birinchisi yutadi: A va B teng, C da 1 > 0.

3.2 Brauzerda ko'ramiz

<style>
  #asosiy span {
    color: #2f6b3a;
  }
  .taom-karta .narx {
    color: #b4461a;
  }
  article p span {
    color: #5b6660;
  }
</style>
<main id="asosiy">
  <article class="taom-karta">
    <p>Osh: <span class="narx">35 000 so'm</span></p>
  </article>
</main>
<aside>
  <article class="taom-karta">
    <p>Choy: <span class="narx">5 000 so'm</span></p>
  </article>
</aside>

Nimaga qarang:

• Osh narxi yashil. Unga uchala qoida ham tushadi: (1,0,1), (0,2,0) va (0,0,3). A ustunida faqat birinchisida 1 bor — u yutdi.
• Choy narxi qizg'ish. U main dan tashqarida, #asosiy span unga tushmaydi. Qolgan ikkitasi: (0,2,0) va (0,0,3). A teng, B da 2 > 0 — ikki class yutdi. Uch teg B ustunidagi bitta ham class'ni yenga olmaydi.

Endi stajyorning savoliga javob beramiz. .taom-karta .narx — (0,2,0), main article p .narx — (0,1,3). Ikkalasi ham #asosiy span ni yenga olmaydi: A ustunida ularda nol. Og'irlik bo'yicha id'ni faqat id bilan yengish mumkin. Yoki, eng to'g'risi, id'ni olib tashlash kerak — buni "Og'irlik urushi" bo'limida ko'ramiz.

Tekshirib ko'ring: Qaysi biri yutadi: nav[aria-label="Asosiy menyu"] [aria-current="page"] yoki uning ostida yozilgan header nav a? Ikkalasi ham bir havolaga tushadi.

4. Mantiqiy pseudo-klasslar va og'irlik

4.1 :is(), :not(), :has() — ichidagi eng og'iri

Mantiqiy pseudo-klasslar darsida bu to'rt vositani o'rgandingiz. Ular og'irlikni o'ziga xos hisoblaydi:

• :is(), :not() va :has() ning o'zi hech narsa qo'shmaydi.
• Ular qavs ichidagi ro'yxatdan eng og'ir selektorning og'irligini oladi. Qo'shib emas — eng kattasini.

Tuzoq ikkinchi qatorda. :is(h1, .aksiya) oddiy h1 ga tushganda ham (0,1,0) bo'lib qoladi — garchi element class orqali emas, teg orqali tanlangan bo'lsa ham. Chrome'da tekshirdik: bu selektor body h1 dan (0,0,2) yutdi, h1.aksiya dan (0,1,1) esa yutqazdi. Og'irlik elementga qarab emas, selektorning o'ziga qarab hisoblanadi.

:not() ni "nol" deb o'ylash ham ko'p uchraydi. :not() ning o'zi nol, lekin ichidagi selektor sanaladi. p:not(.aksiya) — oddiy p.aksiya bilan bir xil og'irlikda.

:nth-child(2 of .yangi) esa oddiy pseudo-klass sifatida B ga 1 qo'shadi, ichidagi .yangi yana 1 qo'shadi. Chrome'da tekshirdik: article:nth-child(2 of .yangi) (0,2,1) main article.yangi (0,1,2) dan yutdi.

4.2 :where() — doim nol

:where() — :is() ning egizagi, bitta farqi bor: uning og'irligi har doim nol. Ichida id bo'lsa ham.

Bu nega kerak? Umumiy "asos" qoidasini yozasiz va uni keyin oson o'zgartirmoqchisiz:

<style>
  :where(#asosiy) a {
    color: #2f6b3a;
  }
  a[href^="https://"] {
    color: #b4461a;
  }
</style>
<main id="asosiy">
  <p><a href="menyu/">Menyu</a></p>
  <p><a href="https://t.me/sizning_kanal">Telegram kanal</a></p>
</main>

Nimaga qarang: menyu havolasi yashil, Telegram havolasi qizg'ish. :where(#asosiy) a ning og'irligi — (0,0,1), faqat a sanaldi. Tashqi havola qoidasi — (0,1,1), u osongina yutdi.

"Tahrirlab ko'rish" bilan :where(#asosiy) ni oddiy #asosiy ga almashtiring. Endi Telegram havolasi ham yashil bo'ladi: (1,0,1) ni (0,1,1) yenga olmaydi. Shuning uchun :where() "tayyor asos" yozadiganlar — CSS kutubxonalari va boshlang'ich qoidalar (CSS reset) — uchun qulay: ularni istalgan oddiy qoida yengadi.

Tekshirib ko'ring: :where(.taom-karta) .narx va .narx — qaysi biri og'irroq? Ikkalasi ham bir span ga tushsa, qaysi biri yutadi?

5. Og'irlikni DevTools'da ko'rish

Hisobingizni brauzerning o'zidan tekshirish mumkin. DevTools → Elements → Styles'da selektor ustiga sichqonchani olib boring. Chiqqan oynachada og'irlik va uning tarkibi yoziladi. Chrome'da nav [aria-current="page"] ustida shunday chiqdi:

Specificity: (0,1,1)
(b) Class-like: [aria-current="page"]
(c) Type-like: nav

Nimaga qarang: DevTools ham ustunlarni harf bilan yozadi: (b) — class'ga o'xshashlar, (c) — tegga o'xshashlar. Brauzer qoidalarining og'irligini ham shu yo'l bilan ko'rasiz. Kaskad darsidagi a:-webkit-any-link ustida DevTools (0,1,1) ko'rsatadi: bitta pseudo-klass va bitta teg. Sizning a (0,0,1) dan og'irroq — lekin manba bosqichida yutqazadi.

6. Specificity nima EMAS

6.1 Inline stil

Ba'zi eski maqolalarda inline stil "to'rtinchi ustun" — (1,0,0,0) deb yoziladi. Zamonaviy standartda bunday ustun yo'q. style atributi — kaskadning alohida bosqichi. U specificity'dan oldin tekshiriladi — Kaskad darsidagi inline stil bosqichi.

Amalda natija o'xshash: inline stilni hech qanday selektor yenga olmaydi. Lekin "ball" modeli boshqa narsalarni tushuntira olmaydi — masalan, nega muallifning !important i oddiy inline stildan yutishini. Shuning uchun uni specificity'ga aralashtirmang.

6.2 !important

!important selektorni og'irlashtirmaydi. U deklaratsiyani boshqa, kuchliroq guruhga — muhimlar guruhiga o'tkazadi. Shuning uchun .aksiya dagi !important id'li oddiy qoidadan yutadi. Ikkala qoida ham !important bo'lsa, ular orasida yana specificity va tartib hal qiladi.

6.3 Meros

Eslatma: meros — ota elementga berilgan ba'zi xususiyatlar (masalan, rang) ichidagi elementlarga ham o'tishi. body ga rang bersangiz, paragraflar ham shu rangda bo'lishi — meros.

Otadan meros bo'lib kelgan qiymatning og'irligi umuman yo'q — hatto nol ham emas. Elementga to'g'ridan-to'g'ri tushgan har qanday qoida merosdan yutadi, * ham:

<style>
  #asosiy {
    color: #2f6b3a;
  }
  * {
    color: #b4461a;
  }
</style>
<main id="asosiy">
  <h2>Bugungi menyu</h2>
  <p>Osh — 35 000 so'm</p>
</main>

Nimaga qarang: sarlavha ham, paragraf ham qizg'ish, yashil emas. #asosiy — (1,0,0), * — (0,0,0). Lekin id'li qoida faqat main ning o'ziga tushadi. h2 va p yashil rangni faqat meros orqali olishi mumkin edi. * esa ularga to'g'ridan-to'g'ri tushdi va merosni to'sib qo'ydi.

Asosiy selektorlar darsida "rang uchun * shart emas" degan edik. Mana nega: * bilan berilgan rang hamma joyda merosni buzadi. Merosni keyingi darsda chuqur o'rganamiz.

Tekshirib ko'ring: Faylda avval p { color: #5b6660; }, undan pastda body { color: #1f2a24; } yozilgan. Ikkalasining og'irligi (0,0,1). Paragraf qaysi rangda bo'ladi?

7. Og'irlik urushi

7.1 Urush qanday boshlanadi

Bitta menyu faylining bir oylik tarixi:

/* 1-hafta: narxlar qizg'ish */
.narx {
  color: #b4461a;
}

/* 2-hafta: kartadagi narx yashil bo'lsin */
.taom-karta .narx {
  color: #2f6b3a;
}

/* 3-hafta: mashhur kartada to'q yashil */
#asosiy .taom-karta.mashhur .narx {
  color: #1a5d1a;
}

/* 4-hafta: aksiyadagi narx qizg'ish bo'lsin... */
.aksiya .narx {
  color: #b4461a !important;
}

Har hafta yangi talab keldi. Har safar dasturchi oldingisidan og'irroq selektor yozdi: (0,1,0) → (0,2,0) → (1,3,0). Id'li qoidani yengish uchun esa !important dan boshqa yo'l qolmadi. Beshinchi haftada "aksiyadagi mashhur taom narxi boshqacha bo'lsin" desa-chi? Faqat yana bitta !important — va id.

Bu holat og'irlik urushi (specificity war) deb ataladi. Har yangi qoida oldingisini "og'irlik bilan bosib" yutadi. Oxirida fayl o'qib bo'lmaydigan bo'ladi va har kichik o'zgarish boshqa joyni buzadi.

7.2 Tinchlik qoidalari

• Asosan bitta class. Hamma qoidalar taxminan bir og'irlikda bo'lsa, ularni tartib boshqaradi — bu esa oldindan aytib bo'ladigan narsa. Katta jamoalarda bu qoidani BEM nomlash tizimi ta'minlaydi.
• Bezash uchun id yo'q. Asosiy selektorlar darsidagi qoida.
• Qisqa zanjir. 2–3 bo'lak. Har ortiqcha bo'lak og'irlikni oshiradi.
• Umumiydan aniqqa. Fayl boshida yengil umumiy qoidalar, pastda aniqroqlari. Asosni :where() bilan yozish mumkin.
• !important — yo'q. Kaskad darsidagi "!important urushi" mashqida ko'rganingizdek, u odatda og'ir selektorning oqibati.

Keyinroq bu masalani yanada tizimli hal qiluvchi vosita — @layer ni Kaskadni boshqarish darsida o'rganasiz.

7.3 .a.a hiylasi

Ba'zan birovning CSS'ini o'zgartira olmaysiz — masalan, tayyor kutubxonaning. Unda .taom-karta .narx yozilgan, (0,2,0). Siz esa oddiy .narx (0,1,0) bilan narxni boshqacha qilmoqchisiz. Id va !important ishlatmasdan qanday yutasiz?

Bitta class'ni ketma-ket ikki marta yozing:

<style>
  /* kutubxona fayli */
  .taom-karta .narx {
    color: #5b6660;
  }
  /* sizning faylingiz */
  .narx.narx {
    color: #b4461a;
  }
</style>
<article class="taom-karta">
  <h3>Lag'mon</h3>
  <p>Narxi: <span class="narx">28 000 so'm</span></p>
</article>

Nimaga qarang: narx qizg'ish. .narx.narx — "ham narx, ham narx class'i bor element". Mantiqan bu oddiy .narx bilan bir xil elementlarni tanlaydi. Lekin og'irligi (0,2,0) — kutubxona selektoriga teng. Sizning faylingiz keyin ulangan, shuning uchun tartib bo'yicha yutdi. Chrome'da tekshirdik.

Shunga o'xshash yana bir usul: id'li elementni [id="asosiy"] bilan tanlash. Atribut selektori bo'lgani uchun uning og'irligi (1,0,0) emas, (0,1,0).

Bu hiylalar — vaqtinchalik yamoq, dizayn emas. Ularni ishlatsangiz, yoniga izoh yozing: /* kutubxonadagi .taom-karta .narx ni yengish uchun */. Aks holda keyingi dasturchi ikkinchi .narx ni "xato" deb o'chirib yuboradi.

8. Ko'p uchraydigan xatolar

8.1 O'nlik sanoq

"11 ta class — 110 ball, id — 100 ball, demak class'lar yutadi". Yo'q. Ustunlar bir-biriga "o'tmaydi": (0,11,0) baribir (1,0,0) dan yengil. Tuzatish: medallar jadvalini eslang — avval A, keyin B, keyin C.

8.2 Kombinator va * ni sanash

header > nav a da > va bo'sh joyni sanab, (0,0,5) chiqarish. Tuzatish: faqat selektor "so'zlarini" sanang: header, nav, a — (0,0,3).

8.3 Pseudo-klass va pseudo-elementni adashtirish

a:hover — (0,1,1), a::before — (0,0,2). Tuzatish: ikki nuqtalar sonini ko'ring: bitta — B ustuni, ikkita — C ustuni.

8.4 :is() ichini qo'shish

:is(.narx, .aksiya, .yangi) ni (0,3,0) deb hisoblash. Tuzatish: yig'indi emas, eng kattasi — (0,1,0).

8.5 Og'irlik bilan "tuzatish"

Qoida yutmadi — oldiga #asosiy qo'shildi. Bu bugun ishlaydi, ertaga urush boshlanadi. Tuzatish: g'olib qoidaning og'irligini pasaytiring yoki qoidalarni to'g'ri tartibga qo'ying.

9. Mashqlar

1-mashq (oson): Og'irlikni hisoblang

Har selektorning og'irligini vergul bilan, bo'sh joysiz yozing:

• footer p a —
• .taom-karta.yangi h3 —
• input[type="email"]:focus —
• #asosiy > article —
• li::marker —
• :where(nav) [aria-current="page"] —

Ishora: avval id'larni, keyin nuqta, kvadrat qavs va bitta ikki nuqtali qismlarni, oxirida teg va :: li qismlarni sanang.

2-mashq (o'rta): Kim yutadi?

Har juftlikda ikkala selektor ham bitta elementga tushadi va ikkala qoida ham color beradi. Qaysi biri yutadi?

1. main p .narx va .taom-karta .narx (faylda birinchisi pastda).
2. nav a:hover va nav [aria-current="page"] (havola ham joriy sahifa, ham sichqoncha ustida).
3. :is(#asosiy, footer) a va main nav a[href].

Ishora: har birini (A,B,C) ga aylantiring. :hover holatini DevTools'da :hov tugmasi bilan majburlab tekshirish mumkin (Chrome DevTools I).

3-mashq (qiyin): Urushni to'xtating

"Urush qanday boshlanadi" bo'limidagi to'rt haftalik faylni qayta yozing. Talablar:

• oddiy narx — qizg'ish (#b4461a);
• karta ichidagi narx — yashil (#2f6b3a);
• mashhur kartadagi narx — to'q yashil (#1a5d1a);
• class="aksiya" li blok ichidagi narx — qizg'ish, mashhur kartada ham.

Cheklovlar: id yo'q, !important yo'q, hech bir selektor (0,2,0) dan og'ir bo'lmasin.

Ishora: og'irliklari teng bo'lgan qoidalarda tartib hal qiladi. Qaysi talab "eng kuchli" bo'lishi kerak — o'shani eng pastga yozing. .taom-karta.mashhur .narx (0,3,0) bo'lib qoladi — uni .mashhur .narx ga qisqartiring.

/* Hammasi (0,1,0) yoki (0,2,0), tartib — umumiydan aniqqa */
.narx {
  color: #b4461a;
}

.taom-karta .narx {
  color: #2f6b3a;
}

.mashhur .narx {
  color: #1a5d1a;
}

.aksiya .narx {
  color: #b4461a;
}

4-mashq: Portfolio qadami — og'irlik auditi

1. asosiy.css dagi har qoidaning ustiga uning og'irligini izoh qilib yozing: /* (0,0,1) */.
2. Eng og'ir selektor qaysi? Faylda id'li selektor bormi? Bo'lmasligi kerak.
3. Footer'dagi havolalar hozir yashil (o'tgan darsda a qoidasini qo'shgan edik). Ular footer matni kabi kulrang (#5b6660) bo'lsin. Qoidani yozing va og'irligini a bilan solishtiring. Bu qoidani faylning qaysi joyiga yozsangiz ham ishlaydimi?
4. DevTools'da footer havolasini tanlang va yangi selektor ustiga sichqonchani olib boring. Og'irlik hisobingizga mos keldimi?

Ishora: 3-band uchun avlod kombinatori yetarli: "footer ichidagi havolalar".

/* ===== 1. Umumiy ===== */
/* (0,0,1) */
body {
  font-family: system-ui, sans-serif;
  color: #1f2a24;
  background-color: #f7faf8;
}

/* (0,0,0) — :where() ichi sanalmaydi */
:where(h1, h2, h3) {
  color: #1f6f4a;
}

/* (0,0,1) */
a {
  color: #1f6f4a;
}

/* (0,1,1) */
a[href^="mailto:"] {
  font-weight: bold;
}

/* ===== 2. Sahifa qismlari ===== */
/* (0,0,1) */
footer {
  color: #5b6660;
}

/* (0,0,2) — oddiy a (0,0,1) dan og'ir */
footer a {
  color: #5b6660;
}

/* ===== 3. Holatlar ===== */
/* (0,2,1) — eng og'ir */
nav[aria-label="Asosiy menyu"] [aria-current="page"] {
  color: #1f2a24;
  font-weight: bold;
}

/* (0,2,1) — :not() ichidagi atribut va :hover */
a:not([aria-current="page"]):hover {
  background-color: #e8f1ec;
}

/* (0,2,1) */
details[name="savollar"][open] {
  background-color: #e8f1ec;
}

10. Real ishda

• Kod ko'rib chiqishda (code review) tajribali dasturchi birinchi navbatda id'li va uzun selektorlarni, !important ni ko'radi. "Bu qoidaning og'irligi nega bunchalik katta?" — odatiy savol.
• Tayyor kutubxonalar o'z asos qoidalarini ko'pincha :where() bilan yozadi — sizning istalgan oddiy qoidangiz ularni yengsin deb.
• Metodologiyalar. BEM, CUBE CSS kabi yondashuvlarning (CSS yozishning kelishilgan qoidalari to'plami) asosiy maqsadlaridan biri — og'irlikni past va tekis saqlash (CSS metodologiyalari).
• Ichma-ich CSS. Zamonaviy CSS'da qoidalarni bir-birining ichiga yozish mumkin. Bunda og'irlik sezdirmay o'sib ketishi mumkin — buni Native CSS nesting darsida ko'rasiz.
• Intervyuda so'raladi: "Specificity qanday hisoblanadi?", ":is() va :where() farqi?", "11 ta class bitta id'dan yutadimi?".

Xulosa

• Specificity — (A,B,C): id'lar; class, atribut va pseudo-klasslar; teglar va pseudo-elementlar.
• Solishtirish chapdan: avval A, keyin B, keyin C. Ustunlar bir-biriga o'tmaydi — bu o'nlik sanoq emas.
• *, kombinatorlar va :where() — nol. :is(), :not(), :has() — ichidagi eng og'ir selektor.
• Inline stil, !important va meros specificity emas. Meros qilingan qiymatni hatto * ham yengadi.
• Og'irlikni past va tekis tuting: asosan bitta class, id'siz, qisqa zanjir. .a.a — faqat izohli yamoq.
• DevTools'da selektor ustiga sichqonchani olib borsangiz, uning og'irligi ko'rinadi.

Keyingi dars: Meros, global kalit so'zlar va qiymat hisoblanish bosqichlari — qaysi xususiyatlar otadan bolaga o'tishini va inherit, initial, unset, revert bilan uni qanday boshqarishni o'rganamiz.

Manbalar

• MDN: "Specificity", ":where()", ":is()" — developer.mozilla.org
• W3C: "Selectors Level 4", "Calculating a selector's specificity" bo'limi — w3.org/TR/selectors-4
• Chrome DevTools: "CSS features reference" (selektor og'irligini ko'rish) — developer.chrome.com/docs/devtools/css/reference