4.2-dars — Selektorlar

Selektor — bu CSS sahifadagi elementlarni topadigan "manzil". Agar CSS — kiyim qoidalari bo'lsa, selektor — "bu qoidalar kimga tegishli" degani. Masalan: "barcha h1 sarlavhalarini oranj qiling", "class .card ga ega barcha elementlarni oq va soyali qiling".

Selektorlarsiz har bir elementni style atributi orqali alohida bezashga to'g'ri kelardi. Bu juda noqulay bo'lardi. CSS selektorlari bir vaqtning o'zida elementlar guruhi uchun stil belgilash imkonini beradi.

Bu darsda biz uchta asosiy selektor turini o'rganamiz: teg bo'yicha, klass bo'yicha va ID bo'yicha. Shuningdek ular bir-biri bilan kaskad va ustuvorlik orqali qanday o'zaro ta'sir qilishini tahlil qilamiz.

Eng oddiy selektor — teg nomi bo'yicha. U sahifadagi shunday tegga ega barcha elementlarni tanlaydi. Agar h1 { color: red; } deb yozsangiz — barcha h1 sarlavhalari qizil bo'ladi.

<style>
  h1 { color: #c2410c; font-size: 32px; }
  p { font-size: 18px; color: #333; line-height: 1.6; }
  a { color: #f97316; text-decoration: none; }
  ul { list-style-type: square; }
</style>

<h1>Bu sarlavha — oranj</h1>
<p>Sahifadagi har bir abzats 18px, rangi #333 bo'ladi.</p>
<p>Hatto shu ikkinchi abzats ham — chunki p tegi bo'yicha selektor barcha p larga qo'llanadi.</p>
<a href="#">Havola oranj, ostiga chizilmagan.</a>
<ul>
  <li>Ro'yxat belgilari — kvadrat shaklda</li>
  <li>Standart doiralar o'rniga</li>
</ul>

Teg bo'yicha selektorlar "standart" stillarni belgilash uchun qulay. Masalan, siz barcha abzatslar 18px bo'lishini xohlaysiz — p { font-size: 18px; } deb yozing va tamom. Har bir abzatsga klass qo'shish shart emas.

E'tibor bering: text-decoration: none havolalardagi tagiga chizishni olib tashlaydi. list-style-type: square ro'yxat belgilarini kvadrat shaklga o'zgartiradi.

Klass bo'yicha selektor — eng ommabop tur. U HTML dagi ma'lum class atributiga ega elementlarni tanlaydi. CSS da klass nuqta orqali yoziladi: .card, .menu-item, .button.

Asosiy afzalligi — bitta klassni turli elementlarda ko'p marta ishlatish mumkin. 10 ta bir xil stildagi tugma yasamoqchimisiz? Ularning barchasiga .button klassini qo'shing.

<style>
  .card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
  }

  .title {
    color: #c2410c;
    font-size: 24px;
    font-weight: bold;
  }

  .button {
    background: #f97316;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  .important {
    background: #fef3c7;
    border-left: 4px solid #f97316;
    padding: 12px 16px;
  }
</style>

<div class="card">
  <div class="title">Birinchi kartochka</div>
  <p>Kartochka ichidagi matn.</p>
  <button class="button">Meni bosing</button>
</div>

<div class="card">
  <div class="title">Ikkinchi kartochka</div>
  <p class="important">⚠ Bu muhim ma'lumot!</p>
  <button class="button">Batafsil</button>
</div>

Bu yerda nima sodir bo'layotganini ko'raylik:

• .card klassi — soyali va yumaloqlangan burchakli oq kartochka. Ikki marta ishlatilgan.
• .title klassi — oranj qalin sarlavha. Bu ham ikki marta.
• .button klassi — oranj tugma. Ikkita tugmani bezaydi.
• .important klassi — chapida oranj chiziqli sariq blok (border-left).

E'tibor bering: box-shadow — bu soyalar uchun xususiyat. 0 2px 8px rgba(0,0,0,0.1) quyidagini bildiradi: X bo'yicha siljish yo'q, Y bo'yicha 2px pastga, xiralashuv 8px, rangi 10% shaffofligi bilan qora. Nafis va chiroyli!

Endi HTML da klassni qanday belgilashni ko'ramiz. Hammasi oddiy: class atributi qiymati sifatida — klass nomi.

<div class="card">...</div>
<p class="important">...</p>
<button class="button">...</button>
<span class="highlight">...</span>

Bitta elementda bir nechta klass bo'lishi mumkin: class="card important" — ularni bo'shliq ajratadi. Shunda elementga ikkala klassning stillari ham ta'sir qiladi.

ID bo'yicha selektor ma'lum id atributiga ega elementni tanlaydi. CSS da ID panja (#) belgisi orqali yoziladi: #header, #main-title, #footer.

Klassdan asosiy farqi: ID sahifada noyob bo'lishi kerak. Bitta sahifada — bitta ID. Bir xil ID ni ikki marta ishlatish mumkin emas. Agar stilni bir nechta elementga qo'llash kerak bo'lsa — klassdan foydalaning.

<style>
  #page-title {
    color: #c2410c;
    font-size: 40px;
    text-align: center;
    border-bottom: 3px solid #f97316;
    padding-bottom: 10px;
  }

  #main-menu {
    background: #333;
    color: white;
    padding: 10px 20px;
  }

  #footer {
    background: #1e293b;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
  }
</style>

<h1 id="page-title">Saytga xush kelibsiz</h1>

<div id="main-menu">
  <a href="#">Bosh sahifa</a> |
  <a href="#">Blog</a> |
  <a href="#">Kontaktlar</a>
</div>

<p>Sahifaning asosiy kontenti...</p>

<div id="footer">
  © 2025, Mening saytim. Barcha huquqlar himoyalangan.
</div>

Bu yerda har bir ID bir marta uchraydi: page-title — faqat sarlavhada, main-menu — faqat menyuda, footer — faqat pastki qismda. Bu to'g'ri.

CSS nomidagi "kaskad" so'zi stillar bir-birining ustiga qo'yilishi mumkinligini va bunda aniq qoidalar mavjudligini bildiradi. Eng oddiy qoida: agar ikkita selektor bir xil kuchga ega bo'lsa, keyinroq yozilgani yutadi.

p {
  color: blue;  /* avval ko'k */
}

p {
  color: red;   /* keyin qizil — qayta belgilaydi */
}

/* Natija: barcha p lar qizil bo'ladi, chunki qizil keyinroq yozilgan */

Bu klasslar bilan ham ishlaydi:

.text { color: blue; }
.text { color: green; } /* yashil yutadi — u keyinroq */

Amalda bu quyidagini bildiradi: agar siz stil yozgan bo'lsangu, u qo'llanmagan bo'lsa — pastroqda (yoki faylda keyinroq) uni qayta belgilaydigan boshqa qoida yo'qligini tekshiring. Shunchaki qoidangizni pastroqqa ko'chiring va u ishlaydi.

Kaskad, shuningdek, stillar ota-elementdan bola elementga meros bo'lib o'tishi mumkinligini ham bildiradi. Masalan, agar body { color: #333; font-family: Arial; } deb belgilasangiz, body ichidagi barcha elementlar (sarlavhalar, abzatslar, ro'yxatlar) ushbu rang va shriftni, agar ularni qayta belgilamasa, meros qilib oladi.

Barcha selektorlar teng emas. Ularning "og'irligi" (o'ziga xoslik — specificity) bor. O'ziga xoslik qanchalik yuqori bo'lsa, selektor shunchalik kuchli bo'ladi va hatto avvalroq yozilgan bo'lsa ham yutadi.

Qoida oddiy: ID klassdan og'irroq, klass esa tegdan og'irroq.

#unique { color: purple; }    /* ID — eng kuchlisi */
.special { color: orange; }  /* klass — o'rtacha */
p { color: blue; }           /* teg — kuchsiz */

/* Agar abzatsda .special klassi va id="unique" bo'lsa, u holda:
   - p tegi aytadi: ko'k ❌
   - .special klassi aytadi: oranj ❌
   - #unique ID si aytadi: binafsha ✅ (g'olib) */

Mana bu HTML da qanday ko'rinadi:

<style>
  p { color: blue; }
  .special { color: orange; }
  #unique { color: purple; }
</style>

<p id="unique" class="special">
  Bu matn qanday rangda? Binafsha! Chunki ID (#unique) klassdan (.special) va tegdan (p) kuchliroq.
</p>

Agar bir nechta ID, klass va teg bo'lsa — "og'irlik" qo'shiladi. Masalan, #header .nav a quyidagicha og'irlikka ega: 1 ID + 1 klass + 1 teg. Yutish uchun eng yuqori toifada ko'proq "ochko" to'plash kerak.

To'liq ustuvorlik (o'ziga xoslik) jadvali:

!important — hammasini qayta belgilaydigan favqulodda qoida. Lekin undan foydalanish tavsiya etilmaydi, chunki uni kelajakda qayta belgilash qiyin.

Keling, qaysi selektor yutishini aniqlashni mashq qilaylik:

/* 1-misol */
div { color: red; }
.warning { color: orange; }
/* Agar div da class="warning" bo'lsa — orange yutadi (klass > teg) */

/* 2-misol */
#menu { color: blue; }
.nav { color: green; }
/* ID kuchliroq — blue yutadi */

/* 3-misol */
p.text { color: purple; }    /* teg + klass = 1 + 10 = 11 */
.text { color: pink; }       /* faqat klass = 10 */
/* purple yutadi — uning og'irligi ko'proq (11 > 10) */

Keling, navigatsiya menyusini yaratamiz va uni teg, klass hamda ID bo'yicha selektorlar yordamida bezaymiz:

<style>
  /* Butun menyu uchun stillar ID orqali */
  #main-nav {
    background: #1e293b;
    padding: 15px 20px;
    border-radius: 8px;
  }

  /* Menyu ichidagi havolalar uchun stillar kombinatsiya orqali */
  #main-nav a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    margin-right: 20px;
    padding: 5px 10px;
    border-radius: 4px;
  }

  /* Menyuning faol bandi uchun stil klass orqali */
  .nav-active {
    background: #f97316;
    color: white;
  }

  /* Sichqoncha havola ustiga kelganda stil (:hover psevdoklassi) */
  #main-nav a:hover {
    background: #334155;
  }
</style>

<nav id="main-nav">
  <a href="#" class="nav-active">Bosh sahifa</a>
  <a href="#">Blog</a>
  <a href="#">Biz haqimizda</a>
  <a href="#">Kontaktlar</a>
</nav>

Tahlil:

• #main-nav — butun menyu uchun ID (qorong'i fon, yumaloqlangan burchaklar)
• #main-nav a — kombinatsiyalangan selektor: menyu ichidagi barcha havolalar (oq rang, tagiga chizilmagan)
• .nav-active — faol band uchun klass (oranj fon)
• #main-nav a:hover — :hover psevdoklassi, sichqoncha yaqinlashganda stil

#main-nav a ga e'tibor bering — bu bo'shliqli selektor. U quyidagini anglatadi: "id="main-nav" bo'lgan element ichidagi barcha a teglarini topish". Bo'shliq — "avlod" kombinatori (descendant combinator).

Klass yordamida kartochkalar galereyasini yaratamiz:

<style>
  .card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    width: 280px;
    display: inline-block;
    margin: 10px;
    vertical-align: top;
  }

  .card h3 {
    color: #c2410c;
    margin-top: 0;
    font-size: 20px;
  }

  .card p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
  }

  .card-tag {
    display: inline-block;
    background: #fef3c7;
    color: #c2410c;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
  }

  .card.featured {
    border: 2px solid #f97316;
    box-shadow: 0 6px 16px rgba(249,115,22,0.2);
  }
</style>

<div class="card">
  <h3>HTML</h3>
  <p>Veb-sahifalar yaratish uchun belgilash tili. Har qanday saytning asosi.</p>
  <span class="card-tag">bazaviy</span>
</div>

<div class="card featured">
  <h3>CSS</h3>
  <p>Veb-sahifalarni bezash uchun stillar tili. Saytlarni chiroyli qiladi.</p>
  <span class="card-tag">ommabop</span>
</div>

<div class="card">
  <h3>JavaScript</h3>
  <p>Interaktiv veb-sahifalar uchun dasturlash tili.</p>
  <span class="card-tag">ilg'or</span>
</div>

Ushbu misoldagi yangi usullar:

• .card h3 — bo'shliqli selektor: .card ichidagi barcha h3
• .card.featured — bo'shliqsiz ikki klass: element IKKALA klassga ham (card va featured) ega bo'lishi kerak. HTML da: class="card featured"
• display: inline-block — kartochkalar bir qatorga tizilib turadi (lekin o'lchamli bloklar bo'lib qoladi)
• vertical-align: top — yuqoriga tekislash (sakramasligi uchun)
• card-tag — yumaloqlangan chetli kichik yorliq (birka)

CSS kartochkasi ajratib ko'rsatilgan — unda featured klassi bor, va .card.featured orqali biz unga oranj ramka va sezilarliroq soya berdik.

Klassdan oldingi nuqta. HTML da class="card" deb yozamiz (nuqtasiz). CSS da .card deb yozamiz (nuqta bilan). Hech qachon adashtirmang!

ID dan oldingi panja belgisi #. HTML da id="header" deb yozamiz (panjasiz). CSS da #header deb yozamiz (panja bilan).

ID ni takrorlash. Bitta ID faqat bitta elementda bo'lishi mumkin. Agar bir nechtasi kerak bo'lsa — klassdan foydalaning.

Klass va teg orasidagi bo'shliq. .card h3 (bo'shliq bilan) — .card ichidagi barcha h3. .cardh3 (bo'shliqsiz) — "cardh3" klassiga ega element. Bo'shliq muhim ahamiyatga ega!

Nuqtali vergulni unutish. Har bir CSS qoidasidan keyin. U bo'lmasa keyingi selektor ishlamaydi.

• Teg bo'yicha selektor: p { } — shunday tegga ega barcha elementlar
• Klass bo'yicha selektor: .card { } — class="card" ga ega elementlar (ko'p marta bo'lishi mumkin)
• ID bo'yicha selektor: #header { } — id="header" ga ega element (faqat bitta)
• Ustuvorlik: ID (100) > klass (10) > teg (1)
• Kaskad: bir xil kuchda keyinroq yozilgan qoida yutadi
• Kombinatsiyalangan selektorlar: #nav a (menyu ichidagi havolalar), .card.featured (ikki klass)
• :hover — sichqoncha yaqinlashganda stil

Mashq qiling: menyu, bir nechta kartochka va turli xil selektorlarga ega sahifa yarating. Ustuvorlik bilan tajriba o'tkazing: ID yordamida klass stilini "yengishga" harakat qiling. DevTools ni oching va o'ziga xoslikni amalda ko'ring. Keyingi darsda — blok modeli (padding, margin, border)!