Chapter 12 — Pseudo-class va Pseudo-element

---

12.1 Pseudo-classlar

Example

styles.css
CSSNusxalash
01a:hover { color: red; }
02input:focus { border-color: blue; }
03li:nth-child(2n) { background: #f5f5f5; } /* juft elementlar */
04li:first-child { font-weight: bold; }

12.2 Pseudo-elementlar

Example

styles.css
CSSNusxalash
01.quote::before { content: '"'; }
02.quote::after { content: '"'; }
03p::first-line { font-weight: bold; }

⚠️ Common Mistake
Pseudo-class (bitta :) va pseudo-element (ikkita ::)ni farqlamaslik — zamonaviy CSS'da ular sintaktik jihatdan ajratiladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Tugmaga :hover va :focus stillarini qo'shing.

🟡 Exercise 2 — Medium

Task: :nth-child(odd) yordamida jadval qatorlarini "zebra-stripe" (navbat bilan rangli) qiling.

🔴 Exercise 3 — Hard

Task: ::before yordamida har bir ro'yxat elementiga maxsus belgi (masalan "→") qo'shing, content va margin-right ishlatib.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.box::before { color: red; font-size: 20px; }

Your Task: ::before elementi nega umuman ko'rinmayapti?

<details> <summary>Solution</summary> `content` xususiyati berilmagan. Pseudo-element ishlashi uchun `content: '';` (yoki matn) SHART, hatto bo'sh bo'lsa ham. Yechim: `.box::before { content: '★'; color: red; font-size: 20px; }`. </details>

---

📌 Chapter Summary

Pseudo-classlar (:hover, :nth-child) elementning holati/pozitsiyasini tanlaydi. Pseudo-elementlar (::before, ::after) "virtual" elementlar yaratadi, content xususiyati shart.

🎯 Key Takeaways

• :hover/:focus — interaktivlik uchun asosiy vositalar
• :nth-child(2n)/:nth-child(odd) — zebra-stripe naqshlari uchun
• ::before/::after — qo'shimcha dekorativ kontent uchun, content majburiy

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01:hover, :focus, :active
02:first-child, :last-child, :nth-child(n)
03::before { content: ''; }
04::after { content: ''; }

---