Chapter 1 — CSS Selektorlari

---

1.1 Asosiy Selector Turlari

Example

styles.css
CSSNusxalash
01p { color: black; }           /* Type selector */
02.card { padding: 16px; }      /* Class selector */
03#header { background: white; } /* ID selector */
04[type="text"] { border: 1px solid gray; } /* Attribute selector */

1.2 Combinatorlar

Example

styles.css
CSSNusxalash
01div p { color: red; }      /* Descendant: div ichidagi barcha p */
02div > p { color: blue; }   /* Child: div'ning to'g'ridan-to'g'ri farzandi bo'lgan p */
03h1 + p { margin-top: 0; }  /* Adjacent sibling: h1'dan keyin darhol keladigan p */
04h1 ~ p { color: gray; }    /* General sibling: h1'dan keyingi barcha p (aka-uka) */

Mental Model

🧠 Bo'sh joy = descendant (istalgan chuqurlikda), > = to'g'ridan-to'g'ri farzand, + = darhol keyingi aka-uka, ~ = istalgan keyingi aka-uka.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: 3 xil selektor turi (type, class, ID) yordamida bitta HTML sahifada turli elementlarni stillang.

🟡 Exercise 2 — Medium

Task: ul > li va ul li orasidagi farqni ko'rsatadigan HTML tuzilma yarating (ichma-ich <ul> bilan).

🔴 Exercise 3 — Hard

Task: h2 ~ p selektorini ishlatib, sahifadagi har bir <h2>dan keyingi barcha paragraflarni (lekin <h2>dan oldingilarni emas) stillang.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.nav li a { color: blue; }

index.html
HTMLNusxalash
01<ul class="nav">
02  <li><a href="#">Link 1</a></li>
03  <li><div><a href="#">Link 2</a></div></li>
04</ul>

Your Task: Ikkala link ham ko'k bo'ladimi? Nega?

<details> <summary>Solution</summary> Ha, ikkalasi ham ko'k bo'ladi, chunki bo'sh joy (descendant combinator) ORALIQDAGI chuqurlikni cheklamaydi — `.nav li a` `<li>` ichidagi istalgan chuqurlikdagi `<a>`ni tanlaydi, hatto `<div>` orasida bo'lsa ham. </details>

---

📌 Chapter Summary

CSS selektorlari — type, class, ID, attribute va combinator (descendant, child, sibling) turlariga bo'linadi. Har biri turli darajadagi aniqlik va moslashuvchanlik beradi.

🎯 Key Takeaways

• Class selektor — qayta ishlatiluvchi stil uchun eng ko'p ishlatiladigan
• > — faqat bevosita farzand, bo'sh joy — istalgan avlod
• + — darhol keyingi sibling, ~ — istalgan keyingi sibling

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01type        { }
02.class      { }
03#id         { }
04[attr=val]  { }
05A B  /* descendant */
06A > B /* child */
07A + B /* adjacent sibling */
08A ~ B /* general sibling */

---