# CSS selektorlar (element, class, id)

> CSS element, class va id selektorlarini, guruhlash, descendant, child, atribut va pseudo-class tanlovlarini hamda specificity asosini o'rganing.

Manba: https://learncode.uz/html-css/selektorlar/
Sana: 2026-05-20

CSS qoidasining chap tomonidagi **selektor** qaysi
[HTML elementlariga](https://learncode.uz/html-css/html-nima) uslub qo'llanishini belgilaydi.
To'g'ri selektor kodni qayta ishlatiladigan qiladi; haddan tashqari aniq
selektor esa keyinchalik o'zgartirishni qiyinlashtiradi.

## Uch asosiy selektor

Element selektori bir xil teglarning barchasini tanlaydi:

```css
p { color: #475569; }
```

Class selektori HTML'dagi `class` atributi qiymatini nuqta bilan tanlaydi.
[Atribut](https://learncode.uz/html-css/html-nima) istalgan elementga berilishi mumkin, shuning
uchun class eng ko'p ishlatiladigan selektordir:

```html
<p class="muhim">Muhim xabar</p>
```

```css
.muhim { color: #b91c1c; }
```

Bir class ko'p elementda, bir element esa bir nechta class bilan ishlashi
mumkin: `class="card featured"`.

ID selektori noyob `id` ni `#` belgisi bilan tanlaydi:

```css
#asosiy-sarlavha { color: #3730a3; }
```

ID sahifada noyob bo'lishi kerak. CSS uchun ko'pincha class qulayroq; ID
fragment havola, label bog'lash va JavaScript kabi noyob aloqalarda muhim.

## Jonli selektorlar

```html
<section class="courses">
  <h1 id="page-title">Kurslar</h1>

  <article class="card featured">
    <h2>HTML va CSS</h2>
    <p>Veb-sahifa tuzilishi va dizayni.</p>
    <a href="#">Boshlash</a>
  </article>

  <article class="card">
    <h2>Python</h2>
    <p>Dasturlash asoslari va amaliyot.</p>
    <a href="#">Boshlash</a>
  </article>
</section>
```

```css
body { background: #f8fafc; }
#page-title { color: #312e81; }
.card {
  margin: 10px 0;
  padding: 14px;
  border: 1px solid #cbd5e1;
  background: white;
}
.featured { border-color: #6366f1; }
.card h2 { margin-top: 0; }
.card a { color: #4338ca; }
```

Bu yerda `.card` ikkala maqolaga, `.featured` faqat birinchisiga, `.card h2`
esa card ichidagi sarlavhalarga qo'llanadi.

## Guruhlash va munosabat selektorlari

Bir xil qoidani bir nechta selektorga vergul bilan bering:

```css
h1, h2, h3 {
  line-height: 1.2;
}
```

Bo'sh joy ichkaridagi istalgan avlodni tanlaydi:

```css
.card a { text-decoration: none; }
```

`>` faqat bevosita farzandni tanlaydi:

```css
nav > ul { list-style: none; }
```

Selektorni keragidan ortiq uzun yozmang. `.sidebar nav ul li a` o'rniga
maqsadli `.sidebar-link` classi ko'pincha barqarorroq.

## Atribut va holat selektorlari

Atribut selektori ma'lum atributli elementni topadi:

```css
input[type="email"] { border-color: #6366f1; }
[disabled] { opacity: 0.55; }
```

Pseudo-class elementning holatini tanlaydi:

```css
a:hover { color: #1d4ed8; }
button:focus-visible { outline: 3px solid #38bdf8; }
input:required { border-left: 3px solid #f59e0b; }
```

Hover faqat sichqoncha bilan ishlaydigan yagona signal bo'lmasligi kerak.
Klaviatura foydalanuvchisi uchun `:focus-visible` holatini ham ko'rinarli
qiling.

## Specificity — qaysi qoida yutadi?

Bir elementga qarama-qarshi qoidalar mos kelsa, brauzer ularning aniqligini
hisobga oladi. Soddalashtirilgan tartib:

```text
element < class/atribut/pseudo-class < id < inline style
```

```css
p { color: gray; }
.notice { color: orange; }
#urgent { color: red; }
```

`<p id="urgent" class="notice">` uchun ID qoidasi aniqroq. Aniqlik teng
bo'lsa, stylesheetda keyinroq yozilgan qoida yutadi.

> **Specificity poygasidan qoching**
>
> Muammoni ko'p ID, juda uzun selektor yoki `!important` bilan bosish kodni
> mo'rt qiladi. Qayta ishlatiladigan classlar va sodda komponent tuzilmasi
> odatda yetarli.

> **Class — asosiy ishchi vosita**
>
> Element selektori umumiy bazaga, class komponent va holatlarga, ID esa noyob
> aloqalarga mos. Bu qat'iy qonun emas, lekin boshlang'ich loyiha uchun yaxshi
> yo'nalishdir.

## Amaliy mashq

Uchta kurs kartasi yarating. Barchasiga `.card`, bittasiga qo'shimcha
`.featured` classi bering. Card ichidagi havolani descendant selektor,
klaviatura fokusini `:focus-visible` bilan bezang. ID ishlatmasdan yechishga
harakat qiling.

## Qisqacha xulosa

- Element selektori teglarni, class qayta ishlatiladigan guruhni tanlaydi.
- ID noyob bo'lishi kerak va specificitysi yuqori.
- Guruhlash takrorni, munosabat selektorlari tanlov doirasini boshqaradi.
- Atribut selektori atributga, pseudo-class holatga qarab tanlaydi.
- Sodda classlar specificity muammolarini kamaytiradi.

Keyingi darsda [CSS rang va fon](https://learncode.uz/html-css/rang-fon) bilan tanlangan
elementlarga vizual iyerarxiya beramiz.