Chapter 17 — Ilg'or Selektorlar

---

17.1 :not(), :is(), :where()

Example

styles.css
CSSNusxalash
01li:not(:last-child) { border-bottom: 1px solid gray; }
02:is(h1, h2, h3) { font-weight: bold; }
03:where(.card, .panel) p { margin: 0; }

17.2 :has() va Attribute Selektorlar

Example

styles.css
CSSNusxalash
01.card:has(img) { padding: 0; } /* Rasmga ega bo'lgan kartalar */
02a[href^="https"] { color: green; }  /* https bilan boshlanuvchi */
03a[href$=".pdf"] { color: red; }     /* .pdf bilan tugovchi */

⚠️ Common Mistake
:has()ni eski brauzerlarda ishlatishga urinish — bu nisbatan yangi CSS xususiyati, brauzer qo'llab-quvvatlashini tekshirish kerak.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: :not(:last-child) yordamida ro'yxat elementlariga faqat oxirgisidan tashqari pastki chegara bering.

🟡 Exercise 2 — Medium

Task: a[href^="mailto:"] selektori orqali email havolalariga maxsus ikonka (::before bilan) qo'shing.

🔴 Exercise 3 — Hard

Task: :has() yordamida faqat checkbox belgilangan (:checked) formalarning ota konteynerini stilga ega qiling (masalan form:has(input:checked)).

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01h1, h2, h3 { color: blue; }
02h1:hover, h2:hover, h3:hover { color: red; }

Your Task: Bu kodni :is() yordamida qanday qisqartirish mumkin?

<details> <summary>Solution</summary> ```css :is(h1, h2, h3) { color: blue; } :is(h1, h2, h3):hover { color: red; } ``` `:is()` bir nechta selektorni birlashtirib, takrorlanishni kamaytiradi. </details>

---

📌 Chapter Summary

:not(), :is(), :where() — bir nechta selektorni birlashtirish yoki istisno qilish uchun. :has() — "parent selector" imkonini beradi. Attribute selektorlar (^=, $=, *=) qisman moslikni tekshiradi.

🎯 Key Takeaways

• :is()/:where() kodni DRY (takrorlanmas) qiladi
• :has() — birinchi marta CSS'da "ota"ni "bola"ga qarab tanlash imkonini beruvchi vosita
• Attribute selektorlar URL turlari (masalan tashqi havolalar)ni ajratishda foydali

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01:not(selector)
02:is(sel1, sel2)
03:where(sel1, sel2) /* :is() kabi, lekin 0 specificity */
04:has(selector)
05[attr^="val"] /* starts with */
06[attr$="val"] /* ends with */
07[attr*="val"] /* contains */

---