CSS nth-child: tuzilma pseudo-klasslari va An+B formulasi

Qisqacha: Tuzilma pseudo-klasslari elementni ota ichidagi o'rni bo'yicha tanlaydi: li:first-child — birinchi, li:last-child — oxirgi. Formula :nth-child(An+B) istalgan qolipni beradi: 2n+1 (yoki odd) — toq o'rindagilar, 3n — har uchinchisi, -n+3 — birinchi uchtasi. :nth-child hamma qo'shnilarni sanaydi, :nth-of-type — faqat shu tegdagilarni, :nth-child(2 of .achchiq) esa faqat selektorga mos kelganlarini. Sanash 1 dan boshlanadi.

Bu darsda

• Birinchi, oxirgi va yagona elementni class qo'shmasdan tanlaysiz.
• An+B formulasini hisoblab, istalgan qolipni yozasiz: toq, juft, har uchinchi, birinchi N ta, oraliq.
• :nth-child va :nth-of-type farqini tushuntirasiz va of S bilan sanashni bilasiz.
• :empty va :root nima ekanini bilasiz.
• Elementlar soniga qarab bezaydigan "miqdor so'rovi"ni yozasiz.

Oldin bilishingiz kerak: Holat pseudo-klasslari, Asosiy selektorlar va kombinatorlar, Ro'yxatlar.

1. Nega bu kerak?

Jasur aka menyu haqida uchta istak aytdi:

• "Ro'yxatdagi birinchi taom — kun taomi. U qalin bo'lsin."
• "Taomlar orasida chiziq bo'lsin, lekin oxirgisining tagida kerak emas."
• "Har uchinchi qator och fonda bo'lsin — ko'z adashmasin."

Har li ga class qo'yib chiqsa bo'ladi: birinchi, oxirgi, uchinchi. Lekin ertaga Rustam aka menyuga yangi taom qo'shadi — va hamma class'larni qaytadan ko'chirish kerak bo'ladi. Aslida bu yerda elementning nomi emas, o'rni muhim.

Maktabdagi jismoniy tarbiya darsini eslang. O'qituvchi "Birinchi-ikkinchiga sanang!" deydi. Keyin "Ikkinchilar — bir qadam oldinga!" O'qituvchi bolalarning ismini bilishi shart emas. Kimning qayerda turgani yetarli. CSS ham shunday sanay oladi. Buning uchun tuzilma pseudo-klasslari (tree-structural pseudo-classes) bor.

2. Birinchi, oxirgi va yagona

2.1 :first-child va :last-child

• :first-child — otasining birinchi bolasi.
• :last-child — otasining oxirgi bolasi.

Jasur akaning dastlabki ikki istagi:

<style>
  li {
    border-bottom: 1px solid #5b6660;
    padding: 4px 0;
  }
  li:first-child {
    font-weight: bold;
    color: #2f6b3a;
  }
  li:last-child {
    border-bottom: 0;
  }
</style>
<ul>
  <li>Osh — 35 000 so'm (kun taomi)</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: osh qalin va yashil — u birinchi. Chiziqlar taomlar orasida bor, ko'k choyning tagida esa yo'q: border-bottom: 0 oxirgi qatordagi chiziqni olib tashladi. Endi yangi taomni ro'yxat oxiriga qo'shsangiz, chiziq o'zi joyini topadi.

Asosiy selektorlar darsida xuddi shu natijani boshqa yo'l bilan olgan edik: li + li — oldida li bor har bir qator. Ikkala yo'l ham to'g'ri. Qaysi biri o'qishga tushunarliroq bo'lsa, o'shani tanlang.

2.2 Tuzoq: "otaning birinchi bolasi", "birinchi article" emas

«Bahor» menyusining bo'limi: avval sarlavha, keyin kartalar.

<section>
  <h2>Issiq taomlar</h2>
  <article class="taom-karta">...</article>
  <article class="taom-karta">...</article>
</section>

article:first-child birinchi kartani tanlaydimi? Yo'q. Chrome'da tekshirdik — hech narsa topilmadi. Selektorni o'ngdan chapga o'qing: "article, va u otasining birinchi bolasi". section ning birinchi bolasi — h2, article emas. Ikki shart birga bajarilmadi.

Bu eng ko'p uchraydigan tushunmovchilik. :first-child "shu tegdagilarning birinchisi" degani emas. Bunday tanlov uchun :first-of-type bor — uni pastroqda, "teg bo'yicha sanash" bo'limida ko'ramiz.

2.3 :only-child — yagona bola

:only-child — otasida boshqa bola yo'q element. Bu :first-child:last-child bilan bir xil: ham birinchi, ham oxirgi.

Bir narsaga e'tibor bering: faqat elementlar sanaladi, oddiy matn emas. Chrome'da tekshirdik: <p>Narxi <b>35 000</b> so'm</p> dagi b — :only-child. Uning atrofidagi matn bola hisoblanmaydi.

Tekshirib ko'ring: <ul><li>Osh</li></ul> — bitta qatorli ro'yxat. Bu li ga nechta pseudo-klass mos keladi: :first-child, :last-child, :only-child?

3. :nth-child() va An+B formulasi

3.1 Aniq raqam

li:nth-child(3) — otasining uchinchi bolasi bo'lgan li. Sanash 1 dan boshlanadi: birinchi bola — 1, ikkinchisi — 2. Keyinroq JavaScript'da massiv elementlari 0 dan sanalishini ko'rasiz (Massiv) — CSS'da esa odamlar sanaganidek.

3.2 Formula: An+B

Qavs ichiga raqam emas, formula ham yozish mumkin: An+B. Bu yerda:

• n — sanoq: brauzer uning o'rniga ketma-ket 0, 1, 2, 3... qo'yadi;
• A — qadam: har nechtadan biri;
• B — qayerdan boshlash.

Brauzer har n uchun natijani hisoblaydi. 1 va undan katta natijalar — tanlangan elementlarning raqamlari. 0 va manfiy natijalar tashlab yuboriladi.

3n+1 ni birga hisoblaymiz:

• n = 0 → 3·0 + 1 = 1
• n = 1 → 3·1 + 1 = 4
• n = 2 → 3·2 + 1 = 7
• n = 3 → 3·3 + 1 = 10

Demak, li:nth-child(3n+1) — 1-, 4-, 7-, 10-qatorlar. Birinchidan boshlab, har uchinchisi.

Hamma qatorni o'nta li li ro'yxatda Chrome'da tekshirdik — natijalar jadval bilan bir xil chiqdi.

Ikki formula shunchalik ko'p ishlatiladiki, ularning so'z bilan yozilgan nomi bor: odd ("toq") = 2n+1, even ("juft") = 2n.

3.3 Jasur akaning uchinchi istagi

<style>
  li:nth-child(3n) {
    background-color: #fffaf0;
    font-weight: bold;
  }
</style>
<ol>
  <li>Osh</li>
  <li>Lag'mon</li>
  <li>Manti</li>
  <li>Sho'rva</li>
  <li>Somsa</li>
  <li>Qozon kabob</li>
  <li>Norin</li>
  <li>Chuchvara</li>
  <li>Ko'k choy</li>
</ol>

Nimaga qarang: 3-, 6- va 9-qatorlar qaymoq fonli va qalin. "Tahrirlab ko'rish" tugmasini bosing va 3n o'rniga odd, -n+3, n+7 yozib ko'ring — har safar boshqa qatorlar yonadi.

3.4 Oraliq: ikki shart birga

"3-dan 6-gacha" kabi oraliq uchun ikki pseudo-klassni yopishtiramiz:

li:nth-child(n+3):nth-child(-n+6) {
  font-weight: bold;
}

Birinchi shart — "3-dan boshlab", ikkinchisi — "6-gacha". Element ikkalasiga mos bo'lishi kerak, xuddi .taom-karta.mashhur dagi ikki class kabi. Chrome'da tekshirdik: 3, 4, 5 va 6-qatorlar tanlandi.

3.5 Yozish qoidalari

• + va - atrofida bo'sh joy mumkin: 2n + 1 ishlaydi.
• 2 va n orasida esa bo'sh joy bo'lmaydi: 2 n+1 — noto'g'ri selektor, brauzer butun qoidani tashlaydi. Chrome'da tekshirdik.
• :nth-child(0) hech narsani tanlamaydi — 0-o'rin yo'q.
• :nth-child(n) — hammasi: n = 0 da 0, keyin 1, 2, 3...
• Formulani har doim n qatnashgan qism birinchi bo'ladigan qilib yozing: 2n+1, 1+2n emas.

Tekshirib ko'ring: 12 qatorli ro'yxatda li:nth-child(4n) nechta qatorni tanlaydi?

4. Oxirdan sanash va teg bo'yicha sanash

4.1 :nth-last-child() — oxiridan

:nth-last-child() xuddi :nth-child() kabi, faqat sanashni oxiridan boshlaydi. li:nth-last-child(1) — oxirgi qator, ya'ni :last-child. li:nth-last-child(-n+2) — oxirgi ikkitasi. Chrome'da o'nta qatorda tekshirdik: 9 va 10-qatorlar tanlandi.

Bu "oxirgi ikkita yangilik" yoki "ro'yxat oxiridagi eslatmalar" uchun qulay. Ro'yxat uzunligi o'zgarsa ham, qoida baribir oxirgi ikkitasini topadi.

4.2 :nth-of-type() oilasi

:nth-child otaning hamma bolalarini sanaydi: sarlavhani ham, paragrafni ham, kartani ham. Ba'zan esa faqat bir turdagi teglarni sanash kerak. Buning uchun -of-type oilasi bor:

Farqni «Bahor» menyusining bo'limida ko'ramiz:

<style>
  article {
    border: 1px solid #5b6660;
    padding: 0 12px;
    margin: 4px 0;
  }
  article:nth-child(2) {
    background-color: #fffaf0;
  }
  article:nth-of-type(2) {
    border: 3px solid #b4461a;
  }
</style>
<section>
  <h2>Issiq taomlar</h2>
  <article class="taom-karta"><p>Osh</p></article>
  <article class="taom-karta"><p>Lag'mon</p></article>
  <article class="taom-karta"><p>Manti</p></article>
</section>

Nimaga qarang: qaymoq fon osh kartasida — u section ning ikkinchi bolasi (birinchisi — h2). Qalin qizg'ish ramka esa lag'mon kartasida — u ikkinchi article. Bitta "2" raqami ikki xil elementni topdi.

margin — elementning tashqi bo'sh joyi, kartalar bir-biriga yopishmasin deb qo'ydik (Box model darsida to'liq).

4.3 Tuzoq: -of-type class'ni bilmaydi

"Type" — bu teg. :nth-of-type class'ga umuman qaramaydi. Ko'p dasturchi .achchiq:nth-of-type(2) ni "ikkinchi achchiq taom" deb o'ylaydi. Aslida u "ikkinchi article, agar u achchiq bo'lsa" degani.

Chrome'da tekshirdik: beshta kartadan 2, 3 va 5-si achchiq bo'lganda .achchiq:nth-of-type(2) ikkinchi kartani topdi — u tasodifan achchiq edi. Achchiq kartalar orasida sanash uchun boshqa vosita kerak.

Tekshirib ko'ring: section ichida h2, p, article, article turibdi. article:first-of-type va article:first-child nimani tanlaydi?

5. of S: faqat keraklilarini sanash

5.1 "Ikkinchi achchiq taom"

:nth-child() qavsi ichiga formuladan keyin of so'zi va selektor yozish mumkin. Shunda brauzer faqat shu selektorga mos qo'shnilarni sanaydi. "S" — selektor so'zining bosh harfi:

<style>
  article {
    border: 1px solid #5b6660;
    padding: 0 12px;
    margin: 4px 0;
  }
  :nth-child(1 of .achchiq) {
    border: 3px solid #b4461a;
  }
</style>
<section>
  <h2>Menyu</h2>
  <article class="taom-karta"><p>Osh</p></article>
  <article class="taom-karta achchiq"><p>Lag'mon</p></article>
  <p>Achchiq taomlar qalampir bilan tayyorlanadi.</p>
  <article class="taom-karta achchiq"><p>Chuchvara</p></article>
  <article class="taom-karta"><p>Manti</p></article>
</section>

Nimaga qarang: qalin qizg'ish ramka lag'monda — u achchiq kartalarning birinchisi. Oshni, sarlavhani va paragrafni brauzer sanamadi, chunki ularda achchiq class'i yo'q. 1 ni 2 ga almashtirib ko'ring — ramka chuchvaraga ko'chadi.

Chrome'da boshqa variantlarni ham tekshirdik: :nth-last-child(1 of .achchiq) — oxirgi achchiq taom, :nth-child(odd of .taom-karta) — kartalar orasida toqlari. Oradagi paragraf va sarlavha sanoqni buzmaydi.

5.2 Brauzerlarda

of S sintaksisi 2023-yil mayidan hamma asosiy brauzerlarda ishlaydi, 2025-yil noyabridan esa Baseline "widely available" (Veb standartlari). Bemalol ishlatsa bo'ladi. Faqat bitta tafsilot: of faqat :nth-child va :nth-last-child da bor. :nth-of-type da yo'q — u baribir teg bo'yicha sanaydi.

6. :empty va :root

6.1 :empty — butunlay bo'sh element

:empty — ichida hech narsa yo'q element: na teg, na matn. «Bahor»ning porsiyalar jadvalida ma'lumot kelmagan katakni ajratamiz:

<style>
  td:empty {
    border: 2px dashed #b4461a;
  }
  td, th {
    padding: 4px 12px;
  }
</style>
<table>
  <caption>Bugungi porsiyalar</caption>
  <tbody>
    <tr><th scope="row">Osh</th><td>12</td></tr>
    <tr><th scope="row">Lag'mon</th><td></td></tr>
    <tr><th scope="row">Manti</th><td>0</td></tr>
  </tbody>
</table>

Nimaga qarang: faqat lag'mon katagi qizg'ish punktir ramkada — u butunlay bo'sh. Mantidagi 0 — bu ham matn, shuning uchun katak bo'sh emas.

Tuzoq — bo'sh joy. Chrome'da tekshirdik: <td> </td> (ichida bitta probel) yoki ichida yangi qator qolgan element :empty hisoblanmaydi. Faqat HTML izohi (<!-- -->) turgan element esa :empty hisoblanadi. Shuning uchun bo'sh katakni yopishtirib yozing: <td></td>.

6.2 :root — hujjatning ildizi

:root — hujjatning eng tepadagi elementi. HTML sahifada bu doim html. Nega html deb yozmaymiz? Ikkalasi ham ishlaydi. Lekin :root pseudo-klass bo'lgani uchun og'irroq (Specificity), va u butun kursda bitta maqsadda ishlatiladi: butun saytga umumiy qiymatlarni — ranglar, o'lchamlar — e'lon qilish. Buni CSS o'zgaruvchilari darsida ko'rasiz. Hozircha shuni bilish yetadi: :root { ... } — "butun sahifa uchun".

7. Miqdor so'rovi: nechta element bor?

7.1 Muammo

«Bahor»ning "Ichimliklar" bo'limida ba'zan 3 ta, ba'zan 8 ta ichimlik bo'ladi. Uch qatorli ro'yxat katta harflarda chiroyli. Sakkiz qatorlisi esa ekranga sig'maydi — uni ixchamroq qilish kerak. CSS "bu ro'yxatda nechta element bor?" deb so'ray oladimi?

To'g'ridan-to'g'ri — yo'q. Lekin tuzilma pseudo-klasslarini birlashtirib, shunday savolni yozish mumkin. Bu usul miqdor so'rovi (quantity query) deb ataladi.

7.2 "5 ta va undan ko'p"

<style>
  li:nth-last-child(n+5),
  li:nth-last-child(n+5) ~ li {
    font-size: 14px;
    color: #5b6660;
  }
</style>
<ul>
  <li>Ko'k choy</li>
  <li>Qora choy</li>
  <li>Ayron</li>
</ul>
<ul>
  <li>Ko'k choy</li>
  <li>Qora choy</li>
  <li>Ayron</li>
  <li>Kompot</li>
  <li>Limonli choy</li>
  <li>Mineral suv</li>
</ul>

Nimaga qarang: birinchi ro'yxat (3 ta) o'zgarmadi. Ikkinchisining (6 ta) hamma qatori kichik va kulrang.

Qoidani bo'lib o'qiymiz:

1. li:nth-last-child(n+5) — oxiridan sanaganda 5-o'rinda yoki undan uzoqroqda turgan li. Bunday qator faqat ro'yxatda kamida 5 ta element bo'lsa mavjud. Olti qatorli ro'yxatda bu — 1 va 2-qatorlar.
2. li:nth-last-child(n+5) ~ li — ulardan keyingi hamma li (Asosiy selektorlar darsidagi ~).

Olti qatorli ro'yxatda sanab ko'ramiz:

Ikkalasi vergul bilan birlashib, ro'yxatning hamma qatorini qamraydi. Uch qatorli ro'yxatda esa birinchi shartga mos qator yo'q — demak, ikkinchisiga ham yo'q. Chrome'da tekshirdik: beshdan kam ro'yxatlarga qoida tushmadi.

7.3 "Aynan 3 ta" va "bitta"

• Aynan 3 ta: li:first-child:nth-last-child(3) — ham birinchi, ham oxiridan uchinchi. Bu faqat 3 qatorli ro'yxatda bo'ladi. Qolgan qatorlarni ~ li bilan qo'shasiz. Chrome'da tekshirdik.
• Bitta: li:only-child.

Bu usul 2010-yillardan beri bor va hamma brauzerda ishlaydi. Keyingi darsda xuddi shu savolni ancha qisqa yozadigan :has() bilan tanishasiz (Mantiqiy pseudo-klasslar).

8. Zebra jadvallar — qisqacha

Tuzilma pseudo-klasslarining eng mashhur ishi — "zebra": jadval qatorlarini navbat bilan bo'yash. Qoidasi bitta qator: tbody tr:nth-child(even). Ko'z uzun qatorda adashmaydi. Lekin chiroyli jadval uchun ramkalar, kataklar orasidagi masofa va sarlavha ham kerak — bularning hammasini Jadvallar stili darsida birga quramiz.

Bir narsani hozir eslab qoling: tr lar tbody ichida sanaladi. thead dagi sarlavha qatori boshqa otaning bolasi — u sanoqqa qo'shilmaydi (Asosiy selektorlar darsidagi tbody tuzog'ini eslang).

9. Ko'p uchraydigan xatolar

9.1 :first-child ni "shu tegning birinchisi" deb o'qish

article:first-child — oldida h2 tursa, hech narsa topmaydi. Tuzatish: article:first-of-type.

9.2 -of-type class'ni sanaydi deb o'ylash

.achchiq:nth-of-type(2) — "ikkinchi article, agar u achchiq bo'lsa". Tuzatish: :nth-child(2 of .achchiq).

9.3 Pseudo-klassni otaga yozish

ul:nth-child(odd) — ro'yxat qatorlarini emas, ul ning o'zini tanlaydi: u otasining toq bolasimi? Tuzatish: pseudo-klass sanaladigan elementga yoziladi — li:nth-child(odd).

9.4 0 dan sanash

li:nth-child(0) — hech narsa, li:nth-child(1) — birinchi. Tuzatish: CSS'da sanash 1 dan boshlanadi.

9.5 Formulada bo'sh joy

:nth-child(2 n+1) — butun qoida tashlanadi. Tuzatish: 2n+1 — son va n yopishib tursin.

9.6 "Bo'sh ko'rinadi, lekin :empty emas"

<td> </td> — ichida probel bor. Tuzatish: bo'sh elementni <td></td> shaklida yozing.

10. Mashqlar

1-mashq (oson): Qaysi qatorlar?

O'nta qatorli ro'yxat berilgan. Har selektor nechta qatorni tanlaydi? Qaysilarini — yechimda tekshiring.

• li:nth-child(4n) —
• li:nth-child(3n+2) —
• li:nth-child(-n+4) —
• li:nth-child(n+7) —
• li:nth-last-child(2) —

2-mashq (o'rta): Kun taomlari

«Bahor» menyusida to'qqizta taom bor (3n misolidagi ro'yxat). CSS yozing:

1. Birinchi uchta taom — qalin: ular eng ko'p sotiladi.
2. Juft qatorlar — #fffaf0 fonda.
3. Oxirgi qator — kulrang (#5b6660): u ichimlik.

Ishora: 1-band — -n+3, 2-band — so'z bilan yoziladigan formula, 3-band — "oxirgi bola" pseudo-klassi.

<style>
  li:nth-child(-n+3) {
    font-weight: bold;
  }
  li:nth-child(even) {
    background-color: #fffaf0;
  }
  li:last-child {
    color: #5b6660;
  }
</style>
<ol>
  <li>Osh</li>
  <li>Lag'mon</li>
  <li>Manti</li>
  <li>Sho'rva</li>
  <li>Somsa</li>
  <li>Qozon kabob</li>
  <li>Norin</li>
  <li>Chuchvara</li>
  <li>Ko'k choy</li>
</ol>

3-mashq (qiyin): Achchiq kartalar va stajyor

Menyu bo'limida sarlavha, keyin beshta karta: osh, lag'mon (achchiq), chuchvara (achchiq), manti, jiz (achchiq). Stajyor yozdi:

article:first-child { font-weight: bold; }
.achchiq:nth-of-type(2) { border: 3px solid #b4461a; }
section:nth-child(odd) { background-color: #fffaf0; }

Jasur aka xohlagani: birinchi karta qalin; ikkinchi achchiq taomning ramkasi qalin; toq kartalar qaymoq fonda.

1. Har qator nimani tanlayapti va nega kutilgan natija chiqmadi?
2. To'g'ri qoidalarni yozing.
3. Bonus: agar bo'limda kamida 4 ta karta bo'lsa, hamma kartalar 14px shriftga o'tsin.

Ishora: har selektorni o'ngdan chapga ovoz chiqarib o'qing. Bonus uchun miqdor so'rovidagi "5 ta va undan ko'p" qoidasini qarang — faqat li o'rniga article va "5" o'rniga "4".

<style>
  article {
    border: 1px solid #5b6660;
    padding: 0 12px;
    margin: 4px 0;
  }
  article:first-of-type {
    font-weight: bold;
  }
  :nth-child(2 of .achchiq) {
    border: 3px solid #b4461a;
  }
  article:nth-of-type(odd) {
    background-color: #fffaf0;
  }
  article:nth-last-of-type(n+4),
  article:nth-last-of-type(n+4) ~ article {
    font-size: 14px;
  }
</style>
<section>
  <h2>Menyu</h2>
  <article class="taom-karta"><p>Osh</p></article>
  <article class="taom-karta achchiq"><p>Lag'mon</p></article>
  <article class="taom-karta achchiq"><p>Chuchvara</p></article>
  <article class="taom-karta"><p>Manti</p></article>
  <article class="taom-karta achchiq"><p>Jiz</p></article>
</section>

4-mashq: Portfolio qadami — o'rin bo'yicha bezash

Portfolio HTML'iga tegmaymiz. asosiy.css ga qo'shing:

1. Loyihalar sahifasi: birinchi loyiha kartasi — eng yangisi — #e8f1ec fonda. O'tgan darslardagi h1 ~ article qoidasini eslang: loyiha sahifasidagi katta article bunga tushmasin.
2. Men haqimda sahifasi: o'qish rejasi jadvalida oxirgi qator — hozirgi oy — qalin.
3. Hamma sahifalar: footer'dagi oxirgi paragraf — mualliflik qatori — 14px.

Ishora: 1-band — h1 ~ article ga -of-type pseudo-klassini yopishtiring. 2-band — tbody tr va "oxirgi bola" pseudo-klassi. 3-band uchun bosh sahifa footer'ini qarang: unda ikkita paragraf bor, boshqa sahifalarda bitta.

/* Eng yangi loyiha — ro'yxat boshida */
h1 ~ article:first-of-type {
  background-color: #e8f1ec;
}

/* O'qish rejasi: hozirgi oy */
tbody tr:last-child {
  font-weight: bold;
}

/* Mualliflik qatori */
footer p:last-child {
  font-size: 14px;
}

<style>
  body {
    font-family: system-ui, sans-serif;
    color: #1f2a24;
    background-color: #f7faf8;
  }
  h2 { color: #1f6f4a; }
  tbody tr:last-child { font-weight: bold; }
  footer { color: #5b6660; }
  footer p:last-child { font-size: 14px; }
</style>
<section>
  <h2>O'qish rejam</h2>
  <table>
    <caption>2026-yilgi o'qish rejasi</caption>
    <thead>
      <tr>
        <th scope="col">Oy</th>
        <th scope="col">Mavzu</th>
        <th scope="col">Holat</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Sentabr</th><td>HTML</td><td>Tugadi</td>
      </tr>
      <tr>
        <th scope="row">Oktabr</th><td>CSS</td><td>Boshlandi</td>
      </tr>
    </tbody>
  </table>
</section>
<footer>
  <p><small>© 2026 Aziz Karimov.</small></p>
</footer>

11. Real ishda

• Jadvallar va ro'yxatlar — zebra qatorlar, oxirgi qatordagi chiziqni olib tashlash, birinchi elementni ajratish. Bu har bir admin panelda bor.
• Kontentni o'zingiz yozmaganda — masalan, blog platformasi yoki CMS (sayt matnini boshqarish tizimi, WordPress kabi) HTML'ni o'zi yaratadi va class qo'shib bo'lmaydi. Tuzilma pseudo-klasslari shunday joyda yagona yo'l bo'ladi.
• Tailwind (kursda alohida o'rganamiz) first:, last:, odd:, even: yozuvlariga ega — ularning ortida shu darsdagi pseudo-klasslar turadi.
• JavaScript ham xuddi shu selektorlar bilan qidiradi: document.querySelector("li:last-child") (Elementlarni tanlash).
• Intervyuda so'raladi: ":nth-child va :nth-of-type farqi nima?", "Birinchi uchta elementni qanday tanlaysiz?", "2n+1 va odd farqi bormi?" (farqi yo'q).

Xulosa

• Tuzilma pseudo-klasslari elementni otasi ichidagi o'rni bo'yicha tanlaydi; sanash 1 dan boshlanadi.
• :first-child, :last-child, :only-child — "otaning birinchi, oxirgi, yagona bolasi", "shu tegning birinchisi" emas.
• An+B: n = 0, 1, 2... qo'yib hisoblanadi. odd = 2n+1, even = 2n, -n+3 — birinchi uchtasi, n+3 — uchinchidan boshlab.
• -of-type faqat shu tegdagilarni sanaydi va class'ga qaramaydi. Selektor bo'yicha sanash — :nth-child(2 of .achchiq).
• :empty — butunlay bo'sh (probel ham kontent); :root — html, butun sahifa uchun.
• Miqdor so'rovi: li:nth-last-child(n+5), li:nth-last-child(n+5) ~ li — "kamida 5 ta bo'lsa".

Keyingi dars: Mantiqiy pseudo-klasslar — :is, :where, :not va "ichida X bor" deb so'raydigan :has() bilan selektorlarni birlashtiramiz.

Manbalar

• MDN: ":nth-child()", ":nth-of-type()", ":first-child", ":only-child", ":empty", ":root" — developer.mozilla.org
• W3C: "Selectors Level 4" — tuzilma pseudo-klasslari va An+B — w3.org/TR/selectors-4
• W3C: "CSS Syntax Module Level 3" — An+B yozuvi — w3.org/TR/css-syntax-3
• web-features (Baseline ma'lumotlari): "nth-child-of" — github.com/web-platform-dx/web-features