CSS kaskadi: qaysi qoida g'olib bo'ladi

Qisqacha: Kaskad — bitta elementning bitta xususiyatiga bir nechta qiymat kelganda brauzer g'olibni tanlaydigan qoidalar tartibi. Avval manba va muhimlik tekshiriladi: oddiy qoidalarda sizning CSS'ingiz brauzer uslublaridan kuchli, !important li qoidalarda esa tartib teskari. Keyin inline style, kaskad qatlamlari va selektor og'irligi (specificity) keladi. Hammasi teng bo'lsa, oxirgi yozilgan qoida yutadi.

Bu darsda

• To'qnashuv nima ekanini va kaskad uni qanday hal qilishini tushuntirasiz.
• Uch manbani — brauzer, foydalanuvchi va muallif uslublarini — ajratasiz.
• !important qanday ishlashini, nega tartibni teskari qilishini va nega undan qochish kerakligini bilasiz.
• Inline stil, kaskad qatlamlari va specificity kaskaddagi o'rnini aytasiz.
• "Oxirgi yozilgan yutadi" qoidasi qachon ishlashini va qachon ishlamasligini bilasiz.

Oldin bilishingiz kerak: CSS nima, Asosiy selektorlar va kombinatorlar, Atribut selektorlari, Chrome DevTools I.

1. Nega bu kerak?

Jasur aka stajyorga aytdi: "Menyudagi narxlar qizg'ish bo'lsin". Stajyor asosiy.css ning eng oxiriga bitta qoida yozdi. Faylni saqladi, sahifani yangiladi — narx yashilligicha qoldi:

<style>
  #asosiy span {
    color: #2f6b3a;
  }
  /* ... fayl davomi ... */
  .narx {
    color: #b4461a;
  }
</style>
<main id="asosiy">
  <article class="taom-karta">
    <h3>Osh</h3>
    <p>Narxi: <span class="narx">35 000 so'm</span></p>
  </article>
</main>

Nimaga qarang: narx yashil. Stajyorning .narx qoidasi pastda turibdi, lekin baribir yutqazdi. O'tgan darslarda "pastdagi yutadi" degan edik — demak, bu qoida hamma vaqt ham ishlamaydi.

Bu "nega CSS'im ishlamayapti?" savolining eng ko'p uchraydigan sababi. Javobi kaskadda. Brauzer ikki qoida orasidan tasodifan tanlamaydi. U har safar bir xil tartibdagi savollarni beradi. Shu savollarni bilsangiz, har qanday to'qnashuvning g'olibini oldindan ayta olasiz.

«Bahor»da ham shunday. Ofitsiant Otabek bir stol haqida turli odamlardan turli topshiriq oladi. Kimga quloq soladi? Avval — kim aytganiga (egasimi yoki mehmonmi). Keyin — "bu juda muhim!" deyilganmi. Keyin — topshiriq qanchalik aniq ("7-stolga" yoki "hamma stollarga"). Hammasi teng bo'lsa — eng oxirgi aytilganiga. Kaskad aynan shunday ishlaydi.

2. Kaskad nima

2.1 To'qnashuv: bitta xususiyat, bir nechta qiymat

CSS nima darsida CSS nomidagi "cascading" — "pog'onali" so'zini "Kaskad darsida ochamiz" degan edik. Kaskad — pog'onali sharshara. Suv har pog'onadan o'tadi va har pog'ona ortiqchasini to'xtatadi. Qoidalar ham navbat bilan "pog'onalardan" o'tadi, oxirida bitta qiymat qoladi.

Kaskad (cascade) — bitta elementning bitta xususiyati uchun bir nechta qiymat kelganda brauzer g'olibni tanlaydigan algoritm. Bunday holat to'qnashuv (conflict) deyiladi.

Muhim nuqta: kaskad har bir xususiyat uchun alohida ishlaydi. Atribut selektorlari darsidagi manti kartasini eslang. Bir qoida ramka rangini, ikkinchisi chiziq turini berdi — ikkalasi ham qo'llandi. Ular to'qnashmadi, chunki xususiyatlari boshqa-boshqa edi. To'qnashuv faqat ikkala qoida bir xil xususiyatni bersa boshlanadi.

Tekshirib ko'ring: p { color: #2f6b3a; } va p { font-size: 18px; } qoidalari to'qnashadimi?

2.2 Kaskad bosqichlari

Brauzer to'qnashuvni bosqichma-bosqich hal qiladi. Har bosqichda bitta savol beriladi. Javob g'olibni aniqlasa — to'xtaydi. Aniqlamasa, keyingi bosqichga o'tadi:

flowchart TD
  A["Bir xususiyatga<br/>bir nechta qiymat"] --> B["1. Manba va !important"]
  B -->|"teng"| C["2. Inline stil"]
  C -->|"teng"| D["3. Kaskad qatlami"]
  D -->|"teng"| E["4. Specificity"]
  E -->|"teng"| F["5. Yozilish tartibi"]
  F --> G["G'olib qiymat"]

Nimaga qarang: specificity to'rtinchi o'rinda, yozilish tartibi — eng oxirida. Demak, "pastdagi yutadi" qoidasi faqat oldingi to'rt bosqichda hamma narsa teng bo'lsa ishlaydi. «Nega bu kerak?» bo'limidagi narx shu sabab yashil qoldi: #asosiy span 4-bosqichda yutdi, tartibgacha navbat yetmadi.

Standartda yana ikkita kam uchraydigan bosqich bor. Ular maxsus imkoniyatlar uchun: biri Shadow DOM darsida, ikkinchisi (yangi @scope qoidasi) Kaskadni boshqarish darsida keladi. Hozir beshta bosqich yetarli.

3. Manba: qoidani kim yozgan

3.1 Uch manba

Sahifadagi har CSS qoidasining muallifi bor. Kaskad ularni uch guruhga ajratadi — bular manbalar (origins):

• Brauzer uslublari (user-agent stylesheet). Brauzerning ichki CSS'i. CSS nima darsida ko'rgan edik: h1 katta va qalin, havola ko'k va tagi chizilgan — hammasi shu yerdan.
• Foydalanuvchi uslublari (user stylesheet). Saytni o'qiyotgan odam o'zi ulagan CSS. Masalan, ko'rish qobiliyati past foydalanuvchi hamma saytda shriftni kattaroq va qatorlar orasini kengroq qilib qo'yadi. Firefox va Safari bunday faylni ulashga imkon beradi, ba'zi kengaytmalar ham shunday ishlaydi.
• Muallif uslublari (author stylesheet). Sayt yaratuvchisi — ya'ni siz — yozgan CSS: link bilan ulangan fayl, <style> tegi va style atributi.

Oddiy qoidalarda kuch tartibi shunday: brauzer < foydalanuvchi < muallif. Mantiqan ham to'g'ri. Brauzer — "zavod sozlamasi". Foydalanuvchi uni o'ziga moslaydi. Sayt muallifi esa o'z sahifasining dizaynini aniq biladi.

3.2 Muallif brauzerdan yutadi

Bu tartib specificity'dan oldin tekshiriladi. Buni havolada ko'rish mumkin:

<style>
  a {
    color: #2f6b3a;
  }
  h1 {
    font-size: 24px;
  }
</style>
<h1>Choyxona «Bahor»</h1>
<p>
  <a href="menyu/">Menyu</a> ·
  <a href="bron/">Stol band qilish</a>
</p>

Nimaga qarang: havolalar ko'k emas, yashil. Sarlavha ham brauzer bergan kattalikda emas, kichikroq.

Qiziq tomoni bor. Chrome'da havolaga ko'k rang beradigan brauzer qoidasining selektori — a:-webkit-any-link. Unda teg ham, pseudo-klass ham bor. Sizning a selektoringizda esa faqat teg. Demak, brauzer selektori "og'irroq" (og'irlikni keyingi darsda aniq hisoblaymiz). Baribir u yutqazdi, chunki kaskad avval manbani so'raydi. Muallif qoidasi brauzer qoidasidan oldinroq bosqichda yutadi, og'irlikkacha navbat yetmaydi.

Shuning uchun brauzer uslublarini "yengish" uchun maxsus hiyla kerak emas. Oddiy teg selektori yetarli.

Tekshirib ko'ring: Foydalanuvchi o'z CSS faylida :root p { font-size: 22px; } yozgan. Siz saytingizda p { font-size: 16px; } yozdingiz. Paragraf qaysi o'lchamda bo'ladi? :root — sahifaning ildiz elementi, u Tuzilma pseudo-klasslari darsidan tanish.

4. !important: tartibni teskari qiladigan belgi

4.1 Yozilishi

Deklaratsiya oxiriga, ; dan oldin !important qo'shiladi:

.aksiya {
  color: #b4461a !important;
}

Bunday deklaratsiya muhim (important) deb ataladi. Muhim deklaratsiyalar alohida, kuchliroq "qavatda" yuradi. Har qanday muhim deklaratsiya har qanday oddiy deklaratsiyadan kuchli — selektori qanchalik og'ir bo'lmasin.

Bitta nozik joy: !important butun qoidaga emas, faqat o'zi turgan bitta deklaratsiyaga tegishli. Yuqoridagi qoidada font-size bo'lsa, u oddiy qolardi.

4.2 Nega tartib teskari

Muhim qoidalarda manbalar tartibi teskari bo'ladi:

Nega shunday? «Bahor»dagi misolni davom ettiramiz. Oshpaz Rustam aka retseptda "osh ustiga yong'oq sepilsin — albatta!" deb yozdi. Mehmonda esa yong'oqqa allergiya bor va u "menga yong'oq mumkin emas — bu juda muhim!" deydi. Kimniki bajariladi? Albatta mehmonniki. Uning sog'lig'i oshpazning didiga qaraganda muhimroq.

Brauzer ham xuddi shunday o'ylaydi. Ko'rish qobiliyati past foydalanuvchi font-size: 24px !important yozsa, sayt dizayneri buni hatto !important bilan ham bekor qila olmasligi kerak. Teskari tartib foydalanuvchini himoya qiladi.

Brauzerning muhim qoidalari eng tepada turadi. Ular kam, lekin bor. Masalan, Chrome'ning ichki CSS'ida yashirin maydon uchun display: none !important yozilgan. Chrome'da tekshirdik: input[type="hidden"] { display: block !important; } yozsak ham, maydon ko'rinmadi. Brauzer bu yerda "bu maydon hech qachon ko'rinmasin" deb qat'iy turibdi.

Jadvalda harakat effektlari — animatsiya va transition — yo'q. Ular ham kaskadda o'z joyiga ega, lekin ularni 06-qismda, Transition va @keyframes darslarida ko'ramiz. Hozir bilish shart emas.

4.3 Nega !important dan qochamiz

Muallif uchun !important — "hammadan kuchli bo'l" tugmasi. Qulay tuyuladi, lekin uning narxi bor:

1. Bugun .aksiya ga !important qo'ydingiz.
2. Ertaga bitta kartadagi aksiya boshqacha bo'lishi kerak. Oddiy qoida endi hech qachon yutmaydi.
3. Majburan yana !important yozasiz. Endi ikkita muhim qoida bir-biri bilan kurashadi. Ular orasida yana specificity va tartib hal qiladi — muammo bir qavat yuqoriga ko'chdi, xolos.

Bir !important ikkinchisini chaqiradi. Bir necha oydan keyin faylda o'nlab !important bo'ladi va hech kim nima nimani yengayotganini bilmaydi.

Qoida: !important ni muammoni tez yopish uchun ishlatmang. Qoidangiz yutmayotgan bo'lsa, nega yutmayotganini toping — ko'pincha sabab juda og'ir selektor. Asosli holatlar kam: ko'rinishni har doim majburlashi kerak bo'lgan yordamchi qoidalar (masalan, display darsida yoziladigan hidden atributi qoidasi) va o'zgartira olmaydigan begona kodni yengish.

Tekshirib ko'ring: Ikkala qoida ham muallifniki va ikkalasi ham !important: .narx { color: #b4461a !important; } va undan pastda .narx { color: #2f6b3a !important; }. Qaysi biri yutadi?

5. Inline stil: style atributi

CSS nima darsidagi uchinchi ulash usuli — style atributi — kaskadda alohida bosqich. Standart uni "elementga biriktirilgan" uslub deb ataydi.

Qoidasi oddiy: oddiy inline deklaratsiya har qanday oddiy muallif qoidasidan kuchli. Selektorda id bo'lsa ham:

<style>
  #asosiy .narx {
    color: #2f6b3a;
  }
  .aksiya {
    color: #b4461a !important;
  }
</style>
<main id="asosiy">
  <p><span class="narx" style="color: #5b6660;">
    Osh — 35 000 so'm</span></p>
  <p><span class="narx aksiya" style="color: #5b6660;">
    Lag'mon — 25 000 so'm (aksiya)</span></p>
</main>

Nimaga qarang:

• Osh — kulrang. Inline style id'li #asosiy .narx dan yutdi.
• Lag'mon — qizg'ish. .aksiya ning selektori ancha yengil, lekin unda !important bor. Muhim deklaratsiya oddiy inline stildan kuchli.

Chrome'da ikkalasini ham tekshirdik. Yana bir holat: inline stilning o'zida !important bo'lsa (style="color: #5b6660 !important"), u hamma muallif qoidalaridan kuchli bo'ladi — muhim #id qoidasidan ham.

Shuning uchun inline stil "yopishqoq": uni CSS fayldan faqat !important bilan yengish mumkin. CSS nima darsida «Bahor»da inline stilni CSP to'sishini ham ko'rgan edik. Ikki sabab — bitta xulosa: ko'rinish faylda yashasin. Inline stil real kodda ko'pincha JavaScript orqali paydo bo'ladi — buni Stillarni JS'dan boshqarish darsida ko'rasiz.

Tekshirib ko'ring: Faylda #asosiy p { color: #2f6b3a; } bor. HTML'da esa <p style="color: #5b6660;">. Paragraf qaysi rangda bo'ladi?

6. Kaskad qatlamlari — faqat tushuncha

Katta loyihada CSS bir necha qismdan iborat bo'ladi: brauzer farqlarini tekislovchi boshlang'ich qoidalar, tayyor kutubxona, sizning komponentlaringiz. Ularni bir-biriga aralashtirmaslik uchun CSS'da kaskad qatlamlari (cascade layers) bor. Qatlam — qoidalarni nomli "qavat"ga yig'ish usuli.

G'oyasi shunday: qatlamlar tartibi selektor og'irligidan oldin tekshiriladi. Keyinroq e'lon qilingan qatlam oldingisidan yutadi — undagi selektorlar qanchalik yengil bo'lmasin:

<style>
  @layer asos, komponentlar;
  @layer asos {
    #asosiy p span { color: #2f6b3a; }
  }
  @layer komponentlar {
    .narx { color: #b4461a; }
  }
</style>
<main id="asosiy">
  <p>Narxi: <span class="narx">35 000 so'm</span></p>
</main>

Nimaga qarang: narx qizg'ish. Id'li selektor yutqazdi, chunki u oldingi — asos qatlamida. @layer asos, komponentlar; qatori qatlamlar tartibini oldindan e'lon qiladi. Qatlamga kirmagan oddiy qoidalar esa hamma qatlamdan kuchli.

Hozir buni yodlash shart emas. @layer ni to'liq, !important ning qatlamlardagi teskari xulqi bilan birga, Kaskadni boshqarish darsida o'rganamiz. Bugun bitta narsani biling: "qatlam" so'zini ko'rsangiz — bu kaskadning specificity'dan oldingi bosqichi.

7. Specificity — qisqacha

Manba, muhimlik, inline stil va qatlam teng bo'lsa, kaskad selektorlarni solishtiradi. Aniqroq selektor yutadi. Asosiy selektorlar darsida "id selektori juda og'ir" degan edik — mana shu bosqich haqida edi.

Qisqa qoidasi:

• id (#asosiy) — eng og'ir;
• class (.narx), atribut ([aria-current="page"]) va pseudo-klass (:hover) — o'rtacha;
• teg (p) — eng yengil.

«Nega bu kerak?» bo'limidagi narx shu sabab yashil qoldi. #asosiy span da id bor, .narx da — faqat class. Tartibgacha navbat yetmadi.

Portfoliongizda buni allaqachon ishlatdingiz. Atribut selektorlari darsidagi nav[aria-label="Asosiy menyu"] [aria-current="page"] qoidasi header nav a dan og'irroq. Shuning uchun joriy sahifa havolasi yashil emas, matn rangida bo'ldi — qaysi biri faylda yuqorida turishidan qat'i nazar. Og'irlikni aniq hisoblashni keyingi darsda o'rganamiz.

8. Yozilish tartibi: oxirgi yozilgan yutadi

8.1 Bir fayl ichida

Kaskadning oxirgi bosqichi — yozilish tartibi (order of appearance). Qolgan hamma narsa teng bo'lsa, kodda keyinroq turgan deklaratsiya yutadi. Bu ikki joyda ishlaydi:

• Bir blok ichida. CSS nima darsida border-color dan keyin border yozilganda ramka rangi yo'qolgan edi. Qisqa yozuv pastda turgani uchun yutdi.
• Qoidalar orasida. Selektorlar bir xil og'irlikda bo'lsa, pastdagi qoida yutadi.

Atribut selektorlari darsida savol qoldirgan edik: ikki qoida ham border-color bersa, nima bo'ladi? Mana javob:

<style>
  article {
    border: 2px solid #2f6b3a;
    padding: 4px 12px;
  }
  [data-achchiq="3"] {
    border-color: #b4461a;
  }
  [data-porsiya="0"] {
    border-color: #5b6660;
    border-style: dashed;
  }
</style>
<article data-achchiq="3" data-porsiya="4">
  <h3>Lag'mon</h3>
</article>
<article data-achchiq="3" data-porsiya="0">
  <h3>Manti — bugun tugadi</h3>
</article>

Nimaga qarang: lag'mon kartasida ramka qizg'ish. Manti kartasiga ikkala qoida tushdi va u kulrang, uzuq-uzuq ramka oldi. [data-achchiq="3"] va [data-porsiya="0"] bir xil og'irlikda, shuning uchun pastdagisi yutdi. "Tahrirlab ko'rish" bilan ikki qoidaning o'rnini almashtiring — manti ramkasi qizg'ish bo'ladi, lekin uzuq-uzuqligicha qoladi. Nega? Chunki border-style ni faqat bitta qoida beradi, u yerda to'qnashuv yo'q.

8.2 Fayllar orasida

"Keyinroq" faqat bitta fayl ichida emas, butun sahifa bo'yicha hisoblanadi. Brauzer hamma CSS'ni HTML'da uchragan tartibda bitta uzun ro'yxatga teradi:

<head>
  <link rel="stylesheet" href="../assets/css/asosiy.css">
  <link rel="stylesheet" href="../assets/css/menyu.css">
</head>

menyu.css keyin ulangan. Bir xil og'irlikdagi selektorlarda u asosiy.css dan yutadi. <style> tegi ham shu ro'yxatga kiradi. Chrome'da tekshirdik: u link dan oldin tursa, link dagi teng og'irlikdagi qoida yutadi. @import bilan chaqirilgan fayl esa o'sha @import turgan joyga "qo'yilgandek" hisoblanadi. U fayl boshida bo'ladi, demak, qolgan qoidalardan oldin keladi.

Bundan amaliy qoida kelib chiqadi: umumiy fayl — birinchi, aniqroq fayl — keyin. Tayyor kutubxona CSS'ini ishlatsangiz, uni o'zingiznikidan oldin ulang. Aks holda kutubxona sizning qoidalaringizni bosib ketadi.

Diqqat: "Oxirgi yozilgan yutadi" va "og'irroq selektor yutadi" — bir-biriga zid tuyuladi. Aslida ikkalasi ham rost, faqat navbati bor. Avval og'irlik solishtiriladi. Tartib faqat og'irlik teng bo'lganda hal qiladi. «Nega bu kerak?» bo'limidagi stajyor aynan shu yerda adashdi.

Tekshirib ko'ring: Qaysi bosqich g'olibni aniqlaganini yozing. a { color: green; } va brauzerning a:-webkit-any-link { color: blue; } qoidasi — [:manba]. p { color: red; } dan keyin p { color: gray; } — [:tartib]. .narx { color: red !important; } va #asosiy .narx { color: green; } — .

9. Kaskadni DevTools'da ko'rish

Kaskadni ko'z bilan ko'rish mumkin. Chrome DevTools I darsida Styles yorlig'ini ochgan edik. Endi u yerdagi tartibning ma'nosini bilasiz: Styles qoidalarni kaskad tartibida ko'rsatadi. G'olib qoida tepada. Yutqazgan deklaratsiyalar ustidan chizilgan.

«Bahor» menyusidagi joriy sahifa havolasini tanlab ko'ring. Styles'da taxminan shunday ro'yxat chiqadi (← bilan belgilangan qatorlar DevTools'da ustidan chizilgan bo'ladi):

nav [aria-current="page"] {         asosiy.css
  color: #1f2a24;
}
nav a {                             asosiy.css
  color: #b4461a;             ← chizilgan
}
a:-webkit-any-link {      user agent stylesheet
  color: -webkit-link;        ← chizilgan
  cursor: pointer;
}
Inherited from body
body {                              asosiy.css
  color: #1f2a24;             ← chizilgan
}

Nimaga qarang: brauzer qoidasi ro'yxatning pastida va "user agent stylesheet" deb belgilangan. Uning color i chizilgan, cursor i esa ishlayapti — hech kim unga raqobat qilmadi. Bu yana bir bor ko'rsatadi: kaskad har xususiyat uchun alohida ishlaydi. Otadan kelgan rang ham chizilgan — elementning o'z rangi bor. Bu haqda Meros darsida gaplashamiz.

DevTools'ning CSS bilan ishlash imkoniyatlarini DevTools'da CSS darsida to'liq ko'ramiz.

10. Ko'p uchraydigan xatolar

10.1 "Pastga yozdim, baribir ishlamadi"

Yuqorida og'irroq selektor bor. Tartib faqat og'irlik teng bo'lsa hal qiladi. Tuzatish: DevTools'da elementni tanlang va g'olib qoidani toping. Ko'pincha u id yoki uzun zanjirli selektor bo'ladi — keyingi darsda ularni qanday yengillatishni ko'ramiz.

10.2 !important bilan "tuzatish"

Qoida yutmadi — !important qo'shildi. Ishladi, lekin keyingi o'zgarish uchun yana !important kerak bo'ladi. Tuzatish: avval yutqazish sababini toping va uni yo'qoting.

10.3 !important noto'g'ri yozilgan

.narx {
  color: #b4461a !importnat;
}
.aksiya {
  color: !important #b4461a;
}

Birinchisida harf xatosi, ikkinchisida !important qiymatdan oldin turibdi. Chrome'da tekshirdik: ikkala deklaratsiya ham butunlay tashlandi — brauzer rangni umuman qo'llamadi. Bu CSS nima darsidagi "noto'g'ri deklaratsiya jim tashlanadi" qoidasi. Tuzatish: !important — qiymatdan keyin, ; dan oldin, harfma-harf to'g'ri. ! bilan so'z orasidagi bo'sh joy (! important) esa xato emas, lekin uni yozmang.

10.4 Fayllar tartibi

Kutubxona CSS'i sizning asosiy.css dan keyin ulangan — uning qoidalari sizning bir xil og'irlikdagi qoidalaringizni bosib ketadi. Tuzatish: avval kutubxona, keyin o'zingizniki.

10.5 Brauzer qoidasini tahrirlashga urinish

DevTools'da "user agent stylesheet" qoidalari qiya harf bilan yozilgan va tahrirlanmaydi. Ular brauzerning ichida. Tuzatish: o'z faylingizda xuddi shu xususiyatni yozing — muallif qoidasi brauzernikidan baribir yutadi.

11. Mashqlar

1-mashq (oson): Qaysi rang?

<p class="aksiya">Bugun choy bepul!</p>

p {
  color: #1f2a24;
}
.aksiya {
  color: #b4461a;
}
p {
  color: #2f6b3a;
}

1. Paragraf rangining hex kodi — ?
2. Qaysi bosqich hal qildi — ?
3. .aksiya qoidasini faylning eng tepasiga ko'chirsangiz, rang o'zgaradimi — ?

Ishora: avval manba va muhimlikni, keyin selektor og'irligini solishtiring. Class tegdan og'irroq ("Specificity — qisqacha" bo'limi).

2-mashq (o'rta): To'rt narx

<main id="asosiy">
  <p class="narx">1. Osh — 35 000</p>
  <p class="narx" style="color: #5b6660;">2. Lag'mon — 28 000</p>
  <p class="narx aksiya">3. Manti — 25 000</p>
  <p class="narx aksiya" style="color: #5b6660;">4. Choy — 4 000</p>
</main>

#asosiy .narx {
  color: #2f6b3a;
}
.aksiya {
  color: #b4461a !important;
}
.narx {
  color: #1f2a24;
}

Har paragraf qaysi rangda chiqadi? Har biri uchun hal qilgan bosqichni ayting. So'ng "Tahrirlab ko'rish" yoki o'z faylingizda tekshiring.

Ishora: 4-paragrafda uch kuchli da'vogar bor — id, inline va !important. Kaskad bosqichlarini tartib bilan o'ting: avval muhimlik.

<style>
  #asosiy .narx {
    color: #2f6b3a;
  }
  .aksiya {
    color: #b4461a !important;
  }
  .narx {
    color: #1f2a24;
  }
</style>
<main id="asosiy">
  <p class="narx">1. Osh — 35 000</p>
  <p class="narx" style="color: #5b6660;">2. Lag'mon — 28 000</p>
  <p class="narx aksiya">3. Manti — 25 000</p>
  <p class="narx aksiya" style="color: #5b6660;">4. Choy — 4 000</p>
</main>

3-mashq (qiyin): !important urushini to'xtating

Menyu sahifasida ikkita fayl ulangan: avval asosiy.css, keyin menyu.css. asosiy.css da shunday qoidalar bor:

#asosiy p {
  font-size: 16px;
}
#asosiy .narx {
  color: #5b6660;
}

Stajyor menyu.css ga yozgan qoidalari ishlamaganini ko'rdi va hamma joyga !important qo'shdi:

.narx {
  color: #b4461a !important;
}
.taom-karta .narx {
  color: #2f6b3a !important;
}
p {
  font-size: 18px !important;
}
.aksiya {
  font-size: 24px !important;
}

Maqsad: menyu sahifasida narxlar qizg'ish, karta ichidagi narxlar yashil, paragraflar 18px, aksiya matni 24px. Ikkala faylni shunday qayta yozingki, bitta ham !important qolmasin, natija esa o'zgarmasin.

Ishora: !important — kasallik emas, belgisi. Kasallik asosiy.css dagi og'ir selektorlarda. #asosiy ni olib tashlasangiz, menyu.css keyin ulangani uchun teng og'irlikda yutadi.

p {
  font-size: 16px;
}
.narx {
  color: #5b6660;
}

.narx {
  color: #b4461a;
}
.taom-karta .narx {
  color: #2f6b3a;
}
p {
  font-size: 18px;
}
.aksiya {
  font-size: 24px;
}

4-mashq: Portfolio qadami — kaskadga mos tartib

Portfoliongizning asosiy.css ida hozir o'tgan darslardagi qoidalar yozilgan tartibda turibdi. Uni kaskadga mos tartiblaymiz va bitta yangi qoida qo'shamiz.

1. Faylni izohlar bilan uch bo'limga ajrating. Umumiy — butun saytga tegadigan qoidalar: body, sarlavhalar, havolalar, belgilangan matn. Sahifa qismlari — kirish matni, kartalar, non yo'li, jadval, savol-javob, footer. Holatlar — joriy sahifa, hover, fokus, ochiq blok va forma holatlari. Qoidalarni shu bo'limlarga ko'chiring.
2. Umumiy bo'limga a { color: #1f6f4a; } qo'shing — endi hamma havolalar portfolio rangida. Shundan keyin header nav a qoidasi keraksiz bo'lib qoladi — uni o'chiring.
3. Menyudagi joriy sahifa havolasi baribir matn rangida qolishini tekshiring. DevTools'da uni tanlang: qaysi qoidalar ustidan chizilgan?
4. Tajriba: a qoidasini vaqtincha faylning eng oxiriga ko'chiring. Joriy sahifa havolasi yashil bo'lib qoladimi? Natijani ko'rgach, qoidani joyiga qaytaring.

Ishora: 3–4-bandlar uchun "Specificity — qisqacha" bo'limini eslang — nav[aria-label="Asosiy menyu"] [aria-current="page"] selektori a dan og'irroq.

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

:where(h1, h2, h3) {
  color: #1f6f4a;
}

a {
  color: #1f6f4a;
}

a[href^="mailto:"] {
  font-weight: bold;
}

a[href^="https://"]::after {
  content: " ↗";
  content: " ↗" / ", boshqa sayt";
}

::selection {
  background-color: #1f6f4a;
  color: #ffffff;
}

/* ===== 2. Sahifa qismlari ===== */
h1 + p {
  font-size: 18px;
}

h1 ~ article {
  border: 1px solid #c9d6cf;
  padding: 4px 16px;
}

h1 ~ article:first-of-type {
  background-color: #e8f1ec;
}

nav[aria-label="Non yo'li"] {
  font-size: 14px;
}

tbody tr:last-child {
  font-weight: bold;
}

details[name="savollar"] {
  border: 1px solid #c9d6cf;
  padding: 4px 12px;
}

details[name="savollar"] summary::marker {
  color: #1f6f4a;
}

footer {
  color: #5b6660;
}

footer p:last-child {
  font-size: 14px;
}

/* ===== 3. Holatlar ===== */
nav[aria-label="Asosiy menyu"] [aria-current="page"] {
  color: #1f2a24;
  font-weight: bold;
}

a:not([aria-current="page"]):hover {
  background-color: #e8f1ec;
}

:focus-visible {
  outline: 3px solid #1f6f4a;
  outline-offset: 2px;
}

details[name="savollar"][open] {
  background-color: #e8f1ec;
}

input:user-invalid,
textarea:user-invalid {
  border: 2px solid #b4461a;
}

label:has(~ :user-invalid) {
  color: #b4461a;
}

fieldset:has(:user-invalid) legend {
  color: #b4461a;
}

input:checked + label {
  font-weight: bold;
}

12. Real ishda

• "Nega ishlamayapti?" Frontend dasturchining eng ko'p beradigan savoli. Javob deyarli doim kaskadda: DevTools'da element tanlanadi, g'olib qoida topiladi, u nega yutgani kaskad bosqichlari bilan tushuntiriladi.
• Kutubxonalar bilan ishlash. Bootstrap kabi tayyor CSS to'plamlari o'z qoidalarini beradi, siz ularni o'zingiznikiga moslaysiz. Fayllar tartibi va selektor og'irligini bilmasangiz, bu ish !important urushiga aylanadi.
• Zamonaviy vositalar. Tailwind (tayyor class'lar to'plami, kursda alohida o'rganamiz) o'z qoidalarini kaskad qatlamlariga joylaydi. Buni Kaskadni boshqarish darsidan keyin tushunasiz.
• Kod sifati. Jamoalarda CSS tekshiruvchi vosita !important ni taqiqlashi mumkin (Stylelint darsida).
• Intervyuda so'raladi: "CSS kaskadi nima?", "!important qachon ishlatiladi?", "Inline stil id selektoridan kuchlimi?". Endi uchalasiga ham bosqichlar bilan javob bera olasiz.

Xulosa

• Kaskad — bitta xususiyat uchun bir nechta qiymat kelganda g'olibni tanlash tartibi. U har xususiyat uchun alohida ishlaydi.
• Bosqichlar: manba va !important → inline stil → kaskad qatlami → specificity → yozilish tartibi.
• Oddiy qoidalarda muallif > foydalanuvchi > brauzer. !important da tartib teskari — foydalanuvchini himoya qilish uchun.
• Inline stil har qanday oddiy muallif qoidasidan kuchli, muallifning !important i esa oddiy inline stildan kuchli.
• "Oxirgi yozilgan yutadi" faqat oldingi bosqichlarda hammasi teng bo'lsa ishlaydi. Fayllar ham link tartibida hisoblanadi.
• !important — alomat. Qoida yutmasa, sababini toping.

Keyingi dars: Specificity: selektor "og'irligi"ni hisoblash — selektor og'irligini uchta son bilan aniq hisoblaymiz va "og'irlik urushi"dan qochishni o'rganamiz.

Manbalar

• MDN: "Introduction to the CSS cascade", "!important", "@layer" — developer.mozilla.org
• W3C: "CSS Cascading and Inheritance Level 6", "Cascading" bo'limi — w3.org/TR/css-cascade-6
• web.dev: "Learn CSS — The cascade" — web.dev/learn/css/the-cascade