Chapter 2 — Cascade, Specificity va Inheritance

---

2.1 Specificity Qanday Hisoblanadi

Simple Explanation

Agar bir nechta CSS qoidasi bir xil elementga mos kelsa, brauzer eng yuqori "specificity" (aniqlik darajasi)ga ega qoidani tanlaydi.

Mental Model

🧠 Specificity to'rtta darajali hisoblanadi: (inline, ID, class/attribute/pseudo-class, type/pseudo-element). Har biri o'zidan pastki darajadan har doim ustun.

Example

styles.css
CSSNusxalash
01p { color: black; }              /* specificity: 0,0,0,1 */
02.text { color: blue; }           /* specificity: 0,0,1,0 */
03#main { color: red; }            /* specificity: 0,1,0,0 */

#main g'olib chiqadi, chunki ID class'dan yuqori.

2.2 !important va Inheritance

Example

styles.css
CSSNusxalash
01p { color: blue !important; }
02.text { color: red; } /* !important g'alaba qiladi, hatto keyin yozilgan bo'lsa ham */

⚠️ Common Mistake
!importantni haddan tashqari ko'p ishlatish — bu debug qilishni qiyinlashtiradi, chunki keyingi override qilish uchun yana !important kerak bo'ladi ("specificity urushi").

Mental Model

🧠 Ba'zi xususiyatlar (masalan color, font-family) avtomatik ravishda bola elementlarga MEROS bo'lib o'tadi (inherit), boshqalari (masalan border, padding) o'tmaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bitta elementga uchta turli selektor (type, class, ID) orqali turli ranglar bering va qaysi biri g'olib chiqishini kuzating.

🟡 Exercise 2 — Medium

Task: !important ishlatmasdan, faqat specificity orqali uchinchi tomon kutubxona CSS qoidasini bosib o'ting.

🔴 Exercise 3 — Hard

Task: Ota elementga color: blue bering va farzand elementlarda uni qanday xususiyatlar meros olishini (yoki olmasligini) DevTools orqali tekshiring.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.btn { background: blue; }
02.btn.primary { background: green; }

index.html
HTMLNusxalash
01<button class="btn primary">Bosing</button>

Your Task: Tugma qaysi rangda ko'rinadi va nega?

<details> <summary>Solution</summary> Yashil (green) rangda ko'rinadi. `.btn.primary` ikkita class selektorini birlashtirgani uchun specificity'si (0,0,2,0) `.btn`ning (0,0,1,0) dan yuqori. </details>

---

📌 Chapter Summary

Specificity to'rt darajali tizim orqali hisoblanadi: inline > ID > class/attribute/pseudo-class > type. !important eng kuchli, lekin ehtiyotkorlik bilan ishlatilishi kerak. Ba'zi xususiyatlar (typography) meros bo'ladi, boshqalari (box model) bo'lmaydi.

🎯 Key Takeaways

• Specificity'ni tushunish — "nega mening CSS'im ishlamayapti" muammosining aksariyat yechimi
• !important — oxirgi chora, standart yechim emas
• Inheritance orqali umumiy stillarni (masalan shrift) faqat bitta joyda (masalan bodyda) belgilash mumkin

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Specificity tartibi: inline > ID > class/attr/pseudo-class > type
02!important — eng kuchli, lekin ehtiyot bo'ling
03Inherited: color, font-*, line-height, text-align
04Not inherited: margin, padding, border, width, height

---