CSS selektorlari: teg, class, id va kombinatorlar

Qisqacha: Selektor — CSS qoidasi qaysi elementlarga tegishini aytadi. Uchta asosiy turi: teg nomi (p), nuqta bilan class (.narx) va panjara bilan id (#asosiy). * hamma elementni tanlaydi, vergul esa bir necha selektorni bitta qoidaga yig'adi. Kombinatorlar elementni oiladagi o'rni bo'yicha tanlaydi: bo'sh joy — ichidagi, > — bevosita bolasi, + — darhol keyingi qo'shnisi, ~ — keyingi hamma qo'shnilari. Bezash uchun class ishlating, id'ni emas.

Bu darsda

• Teg, class va id selektorlarini yozasiz, ikki class'ni bitta selektorda birlashtirasiz.
• * va vergul bilan guruhlashni qachon ishlatishni bilasiz.
• To'rtta kombinatorni DOM daraxtida "o'qiy" olasiz.
• Nega bezash uchun class id'dan yaxshiroq ekanini tushuntirasiz.
• Brauzer qo'shgan tbody va raqam bilan boshlangan id kabi tuzoqlarni chetlab o'tasiz.

Oldin bilishingiz kerak: CSS nima, Global atributlar, div va span, Brauzer HTML'ni qanday tahlil qiladi.

1. Nega bu kerak?

O'tgan darsdagi "2008-yilgi sahifa" mashqida muammo chiqdi: p selektori sahifadagi hamma paragrafni bo'yadi. Bizga esa faqat bittasi kerak edi. Teg nomi — juda "keng" manzil.

«Bahor»da ofitsiant Otabek ishlaydi. Jasur aka unga har xil topshiriq beradi:

• "Hamma stolga non qo'y" — hamma bir xil turdagi narsa.
• "Oilaviy stollarga qo'shimcha stul qo'y" — belgisi bor bir nechta stol.
• "7-stolga tort olib bor" — bitta, aniq stol.
• "Ayvondagi stollarga ko'rpacha yoz" — joylashgan o'rni bo'yicha.

CSS'da ham xuddi shunday to'rt xil "manzil" bor:

Bu darsda to'rttasini ham, shu tartibda o'rganamiz.

2. Teg selektori

Teg nomi — eng oddiy selektor. U shu tegdagi hamma elementni tanlaydi:

h2 {
  color: #2f6b3a;
}

Rasmiy nomi — tip selektori (type selector), biz uni "teg selektori" deymiz. HTML'da teg nomining katta-kichik harfi ahamiyatsiz: H2 ham ishlaydi. Lekin doim kichik harf bilan yozing.

Teg selektori umumiy asos uchun yaxshi: butun matn shrifti, hamma sarlavhalar rangi. Aniq bitta joyni tanlash uchun esa keng — buning uchun keyingi selektorlar bor.

3. Class selektori

3.1 Nuqta va class nomi

Global atributlar darsidan eslang: class — elementning "guruh nomi". Bitta class ko'p elementda bo'lishi mumkin, bitta elementda esa bir necha class. CSS'da class nomi oldiga nuqta qo'yiladi:

<style>
  .taom-karta {
    border: 1px solid #2f6b3a;
    padding: 4px 12px;
  }
  .narx {
    color: #b4461a;
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
  <p>Narxi: <span class="narx">35 000 so'm</span></p>
</article>
<article class="taom-karta mashhur">
  <h3>Lag'mon</h3>
  <p>Narxi: <span class="narx">28 000 so'm</span></p>
</article>

Nimaga qarang: ikkala kartada yashil ramka, ikkala narx qizg'ish. Bitta qoida — hamma mos elementlar. div va span darsida "CSS .taom-karta, .mashhur va .narx bo'yicha kerakli elementlarni topa oladi" degan edik — mana.

HTML'da nuqta yozilmaydi: class="narx". CSS'da esa nuqta bilan: .narx. Nuqta — "bu teg emas, class" degan belgi.

3.2 Ikki class birga: .taom-karta.mashhur

Ikkinchi karta class="taom-karta mashhur" — unda ikki class bor. Faqat mashhur kartani ajratish uchun ikki class'ni bo'sh joysiz yopishtirib yozamiz:

<style>
  .taom-karta {
    border: 1px solid #2f6b3a;
    padding: 4px 12px;
  }
  .taom-karta.mashhur {
    border-width: 3px;
    background-color: #fffaf0;
  }
</style>
<article class="taom-karta">
  <h3>Osh</h3>
</article>
<article class="taom-karta mashhur">
  <h3>Lag'mon — eng mashhur</h3>
</article>

Nimaga qarang: faqat ikkinchi kartaning ramkasi qalin va foni qaymoq rang. .taom-karta.mashhur — "ham taom-karta, ham mashhur class'i bor element".

Teg va class'ni ham shunday yopishtirish mumkin: p.aksiya — "aksiya class'li paragraf". Boshqa tegdagi class="aksiya" unga tushmaydi.

Diqqat: Bitta bo'sh joy ma'noni butunlay o'zgartiradi. .taom-karta.mashhur — ikki class bir elementda. .taom-karta .mashhur (bo'sh joy bilan) — "taom-karta ichidagi mashhur element". Bizning HTML'da bunday ichki element yo'q — Chrome'da tekshirdik, ikkinchi selektor hech narsani topmaydi. Bo'sh joy nima qilishini pastda, kombinatorlar bo'limida ko'ramiz.

3.3 Class nomida katta-kichik harf farqlanadi

Teg nomlaridan farqli, class nomlari katta-kichik harfni farqlaydi. .Narx selektori class="narx" ni topmaydi — Chrome'da tekshirdik. Shuning uchun Global atributlar darsidagi qoida bo'yicha class nomlari doim kichik harf bilan, so'zlar chiziqcha bilan yoziladi: taom-karta. Bu kebab-case — CSS xususiyatlaridagi font-size kabi.

Tekshirib ko'ring: Kod va texnik matn darsida sintaksis ranglash kutubxonasi kodni <span class="token keyword"> va <span class="token number"> ga o'rashini ko'rgan edik. "Keyin CSS har bir klassga rang beradi" degandik. keyword larni binafsha (#6f42c1), number larni to'q sariq (#b4461a) qiladigan ikki qoida yozing.

<style>
  .keyword {
    color: #6f42c1;
  }
  .number {
    color: #b4461a;
  }
</style>
<pre><code><span class="token keyword">const</span> narx =
<span class="token number">35000</span>;</code></pre>

4. Id selektori

4.1 Panjara va id

Id oldiga panjara (#) qo'yiladi:

#asosiy {
  background-color: #fffaf0;
}

Bu id="asosiy" elementni tanlaydi — portfoliodagi main ni. Id sahifada bitta bo'ladi, shuning uchun selektor ham bitta elementni topadi.

4.2 Bezash uchun class'ni afzal ko'ring

Id selektori ishlaydi, lekin bezash uchun uni tanlamang. Uch sabab:

• Id — bitta element uchun. Ertaga xuddi shunday ikkinchi blok kerak bo'ladi — qoidani qaytadan yozasiz. Class esa istalgan elementga qo'shiladi.
• Id'ning boshqa ishlari bor. Skip link'dagi href="#asosiy", label dagi for, aria-describedby — hammasi id'ga tayanadi. Id'ni "CSS uchun" o'zgartirsangiz, ular buziladi.
• Id selektori juda "og'ir". Ikki qoida to'qnashsa, id'li qoida class'li qoidadan doim yutadi va keyin uni o'zgartirish qiyinlashadi — buni Specificity darsida hisoblaymiz.

Qoida: id — havola va bog'lash uchun, class — bezash uchun.

4.3 Raqam bilan boshlangan id

Global atributlar darsida "standart id="1-taom" ga ruxsat beradi, lekin CSS'da bunday nom bilan ishlash noqulay" degan edik. Mana nega:

<style>
  /* ❌ brauzer bu selektorni tushunmaydi */
  #1-taom { color: #b4461a; }
  /* ✅ ishlaydi, lekin o'qish qiyin */
  #\31 -taom { font-size: 24px; }
</style>
<p id="1-taom">Osh — 35 000 so'm</p>

Nimaga qarang: matn kattalashdi, lekin qizg'ish bo'lmadi. CSS'da nom raqam bilan boshlanmaydi, shuning uchun #1-taom — noto'g'ri selektor. Brauzer butun qoidani tashlab ketdi. Ishlaydigan yo'l — raqamni maxsus kod bilan yozish: \31 — "1" belgisining kodi, undan keyingi bo'sh joy kod tugaganini bildiradi. Bunday kodni hech kim yozishni xohlamaydi. Shuning uchun id doim harf bilan boshlansin. (Keyingi darsda yana bir yo'lni ham ko'rasiz.)

5. Universal selektor *

* — universal selektor (universal selector): u hamma elementni tanlaydi. Dasturchilarning sevimli hiylasi — sahifadagi har bir elementning chegarasini ko'rish:

<style>
  * {
    outline: 1px dashed #b4461a;
  }
</style>
<header>
  <a href="./">Choyxona «Bahor»</a>
</header>
<main>
  <h1>Bugungi menyu</h1>
  <p>Osh — <strong>35 000 so'm</strong></p>
</main>

Nimaga qarang: har bir element — header, a, main, h1, p, hatto strong — qizg'ish punktir chiziq bilan o'ralgan. Ko'ryapsizmi: sahifa aslida qutichalardan iborat. outline — joy egallamaydigan chiziq, u elementlarni surmaydi (Chegara va soyalar darsida). Bu qoidani joylashuv "g'alati" bo'lganda vaqtincha qo'shasiz, keyin o'chirasiz.

* boshqa selektor bilan ham ishlaydi: main * — "main ichidagi hamma narsa". Real kodda * ko'pincha boshlang'ich sozlashda uchraydi — box-sizing darsida ko'rasiz. Shrift yoki rang uchun esa * shart emas: body ga berilgani meros bo'lib hamma yerga yetib boradi (Meros).

6. Guruhlash: vergul

Uchta sarlavhaga bir xil rang kerak. Uchta qoida o'rniga — bitta:

h1,
h2,
h3 {
  color: #2f6b3a;
}

Vergul — "va": "h1 ga ham, h2 ga ham, h3 ga ham". Har bir bo'lak — alohida, to'liq selektor: header a, footer a — "header ichidagi havolalar va footer ichidagi havolalar". Prettier guruhdagi har selektorni alohida qatorga qo'yadi — yuqoridagidek. Bu o'qishni osonlashtiradi.

Diqqat: Guruhdagi bitta selektor noto'g'ri bo'lsa, brauzer butun qoidani tashlab ketadi. h2, #1-taom { color: #b4461a; } — #1-taom noto'g'ri, shuning uchun h2 ham bo'yalmaydi. Chrome'da tekshirdik. Bu CSS nima darsidagi "noto'g'ri selektor — butun qoida tashlanadi" qoidasi. Bu muammodan qutqaradigan :is() ni Mantiqiy pseudo-klasslar darsida ko'rasiz.

Tekshirib ko'ring: h1, .narx, #asosiy { color: #2f6b3a; } qoidasi nechta alohida selektordan iborat va har biri nimani tanlaydi?

7. Kombinatorlar: elementlar oilasi

7.1 DOM — oila daraxti

Hozirgacha elementni "o'zi" bo'yicha tanladik: tegi, class'i, id'si. Endi uni boshqa elementlarga nisbatan tanlaymiz. «Bahor» sahifasining boshi:

<header>
  <a href="./">Choyxona «Bahor»</a>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="./">Bosh sahifa</a></li>
      <li><a href="menyu/">Menyu</a></li>
    </ul>
  </nav>
</header>

Brauzer undan DOM daraxtini quradi (Critical Rendering Path):

flowchart TD
  H["header"] --> A1["a — logotip"]
  H --> N["nav"]
  N --> U["ul"]
  U --> L1["li"]
  U --> L2["li"]
  L1 --> A2["a — Bosh sahifa"]
  L2 --> A3["a — Menyu"]

Nimaga qarang: daraxt — oila shajarasi kabi. Oila so'zlari bilan:

• Ota (parent) — to'g'ridan-to'g'ri ustidagi element. ul — ikkala li ning otasi.
• Bola (child) — to'g'ridan-to'g'ri ichidagi element. nav — header ning bolasi.
• Avlod (descendant) — ichidagi har qanday chuqurlikdagi element: bola, nevara, evara. Menyu havolalari — header ning avlodi.
• Qo'shni (sibling) — bir otaning bolalari. Logotip a va nav — qo'shnilar, ikkala li ham.

Kombinator (combinator) — ikki selektor orasidagi belgi. U ular qanday "qarindosh" ekanini aytadi. CSS'da to'rtta kombinator bor.

7.2 Avlod kombinatori — bo'sh joy

nav a — "nav ichidagi hamma a", qanchalik chuqur bo'lmasin. Bizda a lar nav dan uch qavat pastda (nav → ul → li → a), lekin baribir tanlanadi.

7.3 Bola kombinatori — >

header > a — "header ning bevosita bolasi bo'lgan a". Bizda bu faqat logotip. Menyu havolalari ham header ichida, lekin ular bola emas, chuqurroqdagi avlod.

<style>
  header > a {
    font-size: 22px;
  }
  nav a {
    color: #2f6b3a;
  }
</style>
<header>
  <a href="./">Choyxona «Bahor»</a>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="./">Bosh sahifa</a></li>
      <li><a href="menyu/">Menyu</a></li>
    </ul>
  </nav>
</header>

Nimaga qarang: faqat logotip kattalashdi — u header ning bolasi. Faqat menyu havolalari yashil — ular nav ning avlodi. Logotip nav ichida emas, shuning uchun ko'k qoldi.

Diqqat: table > tr — mashhur tuzoq. Brauzer HTML'ni qanday tahlil qiladi darsida ko'rgan edik: tbody ni yozmasangiz, parser uni o'zi qo'shadi. DOM'da tr ning otasi table emas, tbody bo'lib qoladi.

/* ❌ hech narsani topmaydi: tr ning otasi — tbody */
table > tr {
  color: #b4461a;
}

/* ✅ ikkala yo'l ham ishlaydi */
table > tbody > tr {
  color: #b4461a;
}
table tr {
  color: #b4461a;
}

Chrome'da tekshirdik: birinchi qoida tbody siz yozilgan jadvalga ta'sir qilmadi, qolgan ikkalasi ishladi. Eng yaxshisi — HTML'da tbody ni o'zingiz yozish: shunda kod va DOM bir xil bo'ladi.

7.4 Keyingi qo'shni — +

h2 + p — "h2 dan darhol keyin turgan p". Ikkalasi bir otaning bolasi bo'lishi va orasida boshqa element bo'lmasligi kerak. Chrome'da tekshirdik: h2 va p orasida img tursa, h2 + p ishlamaydi.

Mashhur usul — li + li: "oldida boshqa li turgan li", ya'ni birinchisidan boshqa hammasi. Ro'yxat qatorlari orasiga chiziq tortish uchun juda qulay:

<style>
  li + li {
    border-top: 1px solid #5b6660;
  }
</style>
<ul>
  <li>Osh — 35 000 so'm</li>
  <li>Lag'mon — 28 000 so'm</li>
  <li>Manti — 30 000 so'm</li>
  <li>Ko'k choy — 5 000 so'm</li>
</ul>

Nimaga qarang: chiziqlar faqat qatorlar orasida. Birinchi qatorning tepasida chiziq yo'q — uning oldida li yo'q.

7.5 Keyingi hamma qo'shnilar — ~

h2 ~ p — "h2 dan keyin kelgan hamma p" (bir ota ichida). Orada boshqa elementlar bo'lsa ham farqi yo'q. Faqat bitta cheklov bor: ~ faqat oldinga qaraydi. h2 dan oldingi paragraflar tanlanmaydi.

<style>
  h2 + p {
    font-weight: bold;
  }
  h2 ~ p {
    color: #5b6660;
  }
</style>
<section>
  <p>Menyu har kuni yangilanadi.</p>
  <h2>Bugungi taomlar</h2>
  <p>Osh — 35 000 so'm</p>
  <ul><li>Bedana tuxumi bilan</li></ul>
  <p>Lag'mon — 28 000 so'm</p>
</section>

Nimaga qarang: sarlavhadan oldingi paragraf qora qoldi. Sarlavhadan keyingi ikkala paragraf kulrang (~), lekin faqat birinchisi qalin (+). Ro'yxat ular orasida tursa ham, ~ ikkinchi paragrafni topdi. font-weight: bold — qalin shrift, uni Shrift asoslari darsida ko'rasiz.

Oldingi qo'shnini yoki otani tanlash — masalan, "ichida rasm bor karta" — ham mumkin, lekin boshqa vosita bilan: :has() ni Mantiqiy pseudo-klasslar darsida o'rganamiz.

7.6 Selektorni o'ngdan chapga o'qing

nav a ni brauzer o'ngdan chapga tekshiradi: avval sahifadagi hamma a ni oladi, keyin har biri uchun "yuqorida nav bormi?" deb so'raydi. Siz ham shunday o'qing: eng o'ngdagi qism — nimani bo'yayapmiz, chapdagilar — qayerdagisini. footer p a — "havolalar — footer dagi paragraflar ichidagi".

Zanjirni qisqa tuting — 2–3 bo'lak yetadi. body > main > section > ul > li > a kabi uzun selektor HTML'dagi har kichik o'zgarishda sinadi. Bitta div qo'shildi — qoida ishlamay qoldi.

Tekshirib ko'ring: Ichma-ich ro'yxat bor: <ul><li>Oshlar<ul><li>Toshkent oshi</li></ul></li></ul>. ul > li qoidasi "Toshkent oshi" ga ta'sir qiladimi?

8. Selektorni DevTools'da sinab ko'ring

Selektor to'g'rimi — buni brauzerning o'zidan so'rash mumkin. F12 → Elements panelida Ctrl + F (macOS'da Cmd + F) bosing. Pastda qidiruv qatori ochiladi — unga oddiy matn ham, CSS selektor ham yozsa bo'ladi. nav a deb yozsangiz, DevTools mos elementlarni birma-bir belgilaydi va nechta topilganini ko'rsatadi.

Qoida yozishdan oldin selektorni shu yerda sinasangiz, "nega ishlamayapti?" savoliga kam vaqt ketadi. DevTools'ning CSS bilan ishlash imkoniyatlarini DevTools'da CSS darsida to'liq ko'ramiz.

9. Ko'p uchraydigan xatolar

9.1 Nuqta yoki panjara unutilgan

narx { color: #b4461a; } — brauzer <narx> degan tegni qidiradi. Bunday teg yo'q, xato ham chiqmaydi — shunchaki hech narsa bo'yalmaydi. Tuzatish: .narx.

9.2 HTML'da nuqta yozilgan

<span class=".narx"> — endi class nomining o'zi .narx bo'lib qoldi, .narx selektori uni topmaydi. Chrome'da tekshirdik. Tuzatish: HTML'da nuqtasiz — class="narx".

9.3 Ortiqcha yoki yetishmagan bo'sh joy

p .aksiya — "paragraf ichidagi aksiya", p.aksiya — "aksiya class'li paragraf". Bitta bo'sh joy — boshqa ma'no. Tuzatish: selektorni o'ngdan chapga ovoz chiqarib o'qing va HTML bilan solishtiring.

9.4 Katta harf

.Narx va class="narx" — mos kelmaydi. Tuzatish: class nomlari faqat kichik harf bilan.

9.5 table > tr

Parser qo'shgan tbody sabab ishlamaydi. Tuzatish: tbody ni HTML'da yozing, selektorda table tr yoki tbody > tr ishlating.

9.6 Hamma narsani id bilan bezash

#osh-karta, #lagmon-karta, #manti-karta — uchta bir xil qoida. Tuzatish: bitta .taom-karta class'i.

10. Mashqlar

1-mashq (oson): Nechta element tanlanadi?

<main id="asosiy">
  <h2>Kun taomlari</h2>
  <p>Har kuni yangi.</p>
  <article class="taom-karta mashhur">
    <h3>Osh</h3>
    <p>Narxi: <span class="narx">35 000 so'm</span></p>
  </article>
  <article class="taom-karta">
    <h3>Manti</h3>
    <p>Narxi: <span class="narx">30 000 so'm</span></p>
  </article>
</main>

Har selektor nechta elementni tanlaydi?

• .narx —
• main > p —
• main p —
• .taom-karta.mashhur —
• h2 ~ article —
• h3 + p —

2-mashq (o'rta): «Bahor» menyusini bezang

Oldingi mashqdagi HTML uchun asosiy.css yozing:

1. h2 va h3 — to'q yashil (#2f6b3a), bitta qoida bilan.
2. Narxlar — qizg'ish (#b4461a).
3. Hamma kartaga — 1px solid #2f6b3a ramka va 4px 12px ichki bo'sh joy.
4. Mashhur kartaning ramkasi — 3px.
5. h2 dan keyingi birinchi paragraf — kulrang (#5b6660).

Ishora: 4-band uchun ikki class'ni yopishtiring va to'liq yozuv border-width ni ishlating (CSS nima darsidagi qisqa va to'liq yozuv).

<style>
  h2,
  h3 {
    color: #2f6b3a;
  }
  .narx {
    color: #b4461a;
  }
  .taom-karta {
    border: 1px solid #2f6b3a;
    padding: 4px 12px;
  }
  .taom-karta.mashhur {
    border-width: 3px;
  }
  h2 + p {
    color: #5b6660;
  }
</style>
<main id="asosiy">
  <h2>Kun taomlari</h2>
  <p>Har kuni yangi.</p>
  <article class="taom-karta mashhur">
    <h3>Osh</h3>
    <p>Narxi: <span class="narx">35 000 so'm</span></p>
  </article>
  <article class="taom-karta">
    <h3>Manti</h3>
    <p>Narxi: <span class="narx">30 000 so'm</span></p>
  </article>
</main>

3-mashq (qiyin): Menyu jadvali

Stajyor jadvalni tbody siz yozdi va CSS'i ishlamadi:

<table>
  <caption>Menyu narxlari</caption>
  <tr><th scope="row">Osh</th><td>35 000 so'm</td></tr>
  <tr><th scope="row">Lag'mon</th><td>28 000 so'm</td></tr>
  <tr><th scope="row">Manti</th><td>30 000 so'm</td></tr>
</table>

table > tr + tr {
  border-top: 1px solid #5b6660;
}
table > tr > th {
  color: #2f6b3a;
}

1. Nega hech narsa o'zgarmadi?
2. HTML'ni to'g'rilang va selektorlarni shunday yozingki, ular tbody bor yoki yo'qligiga bog'liq bo'lmasin.
3. Qatorlar orasidagi chiziq ko'rinishi uchun jadvalga border-collapse: collapse; qo'shing — busiz qator (tr) ramkasi chizilmaydi. Bu xususiyatni Jadvallar stili darsida to'liq o'rganamiz.

<style>
  table {
    border-collapse: collapse;
  }
  tr + tr {
    border-top: 1px solid #5b6660;
  }
  tbody th {
    color: #2f6b3a;
    text-align: left;
  }
</style>
<table>
  <caption>Menyu narxlari</caption>
  <tbody>
    <tr><th scope="row">Osh</th><td>35 000 so'm</td></tr>
    <tr><th scope="row">Lag'mon</th><td>28 000 so'm</td></tr>
    <tr><th scope="row">Manti</th><td>30 000 so'm</td></tr>
  </tbody>
</table>

4-mashq: Portfolio qadami — teg va kombinatorlar

Portfolio HTML'ida bitta ham class yo'q — va shunday qoladi. Bu darsdagi selektorlar bilan asosiy.css ni davom ettiring:

1. O'tgan darsdagi ikki qoidani (h1 va h2) bitta guruhga birlashtiring.
2. Asosiy menyu havolalari: header nav a — portfolio rangingizda.
3. Loyihalar sahifasidagi har bir loyiha kartasiga (article) 1px solid ramka (rangi — #c9d6cf kabi och) va 4px 16px ichki bo'sh joy bering. Avval main > article ni sinang, keyin loyihalar/bahor/ sahifasini oching — nima bo'ldi? So'ng faqat ro'yxat sahifasidagi kartalarni tanlaydigan selektor toping.
4. Sahifa sarlavhasidan keyingi birinchi paragrafni kattaroq qiling: 18px.
5. Footer'dagi matn — kulrang (#5b6660).

Ishora: 3-band uchun ikki sahifaning HTML'ini solishtiring: ro'yxat sahifasida h1 va kartalar main ichida yonma-yon turibdi, loyiha sahifasida esa h1 — article ning ichida. Bu farqni ~ bilan ushlash mumkin. 4-band uchun h1 + p. header nav a — uch bo'lakli avlod zanjiri, o'ngdan o'qing: "havolalar — header'dagi nav ichidagi". Non yo'li (nav aria-label="Non yo'li") main ichida turibdi — u bu qoidaga tushmaydi.

/* Portfolio — asosiy uslublar */
body {
  font-family: system-ui, sans-serif;
  color: #1f2a24;
  background-color: #f7faf8;
}

h1,
h2 {
  color: #1f6f4a;
}

/* Asosiy menyu havolalari */
header nav a {
  color: #1f6f4a;
}

/* Loyiha kartalari: faqat h1 dan keyingi qo'shni article'lar */
h1 ~ article {
  border: 1px solid #c9d6cf;
  padding: 4px 16px;
}

/* Sarlavhadan keyingi kirish matni */
h1 + p {
  font-size: 18px;
}

footer {
  color: #5b6660;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  h1, h2 { color: #1f6f4a; }
  header nav a { color: #1f6f4a; }
  h1 ~ article {
    border: 1px solid #c9d6cf;
    padding: 4px 16px;
  }
  h1 + p { font-size: 18px; }
  footer { color: #5b6660; }
</style>
<header>
  <p><a href="../">Aziz Karimov</a></p>
  <nav aria-label="Asosiy menyu">
    <ul>
      <li><a href="../">Bosh sahifa</a></li>
      <li><a href="./" aria-current="page">Loyihalar</a></li>
    </ul>
  </nav>
</header>
<main id="asosiy">
  <h1>Loyihalar</h1>
  <p>HTML qismida qilgan ishlarim.</p>
  <article>
    <h2>Choyxona «Bahor» sayti</h2>
    <p>To'rt sahifali sayt: menyu, bron formasi va 404.</p>
  </article>
</main>
<footer>
  <p><small>© 2026 Aziz Karimov.</small></p>
</footer>

11. Real ishda

• Katta jamoalarda asosan bitta class'dan iborat selektorlar yoziladi (.taom-karta), uzun zanjirlar va id'lar deyarli ishlatilmaydi. Shunda qoidalar oldindan aytib bo'ladigan bo'ladi. Buning nomlash tizimini — BEM'ni CSS metodologiyalari darsida o'rganamiz.
• Tailwind (tayyor class'lar to'plami, kursda alohida o'rganamiz) bilan HTML'da faqat class'lar yoziladi: class="p-4 border". Class selektorini tushunsangiz, bunday kodni o'qish oson.
• JavaScript ham elementni aynan shu selektorlar bilan topadi: document.querySelector(".narx"). Buni Elementlarni tanlash darsida ko'rasiz — bugungi bilim o'sha yerda ham kerak bo'ladi.
• Intervyuda so'raladi: "div p va div > p farqi nima?", "+ va ~ farqi?", "Nega id bilan stil bermaslik kerak?".

Xulosa

• Teg (p), class (.narx) va id (#asosiy) — uchta asosiy selektor. HTML'da nuqta va panjara yozilmaydi.
• .a.b — ikki class bir elementda; .a .b — .a ichidagi .b. Bitta bo'sh joy — boshqa ma'no.
• Class nomlari katta-kichik harfni farqlaydi; id harf bilan boshlansin.
• * — hamma element; vergul — bir necha selektor bitta qoidada, lekin bitta xato butun guruhni o'chiradi.
• Kombinatorlar: bo'sh joy — avlod, > — bola, + — darhol keyingi qo'shni, ~ — keyingi hamma qo'shnilar.
• Bezash uchun class, havola va bog'lash uchun id. Selektor zanjirini qisqa tuting.

Keyingi dars: Atribut selektorlari — elementni href, data-* yoki aria-* atributi va uning qiymati bo'yicha tanlaymiz.

Manbalar

• MDN: "CSS selectors", "Type selectors", "Class selectors", "ID selectors", "Combinators" — developer.mozilla.org
• W3C: "Selectors Level 4" — w3.org/TR/selectors-4
• web.dev: "Learn CSS — Selectors" — web.dev/learn/css/selectors