Selektorlar — element, class, id, universal

~15 daq · CSS · CSS Asoslari

Muammodan boshlaylik

Sahifada 10 ta tugma. Ulardan 8 tasi oddiy (kulrang), 1 tasi asosiy (ko'k, "Sotib olish"), 1 tasi xavfli (qizil, "O'chirish"). Agar CSS da faqat button { ... } yozsangiz — hammasi bir xil bo'ladi.

CSS ning birinchi vazifasi — kerakli elementlarni topish. Bu ishni selektorlar bajaradi. Selektorni to'g'ri tanlash — yaxshi CSS ning yarmi.

1. Element (teg) selektori

Teg nomi bo'yicha — sahifadagi barcha shunday elementlar:

p {
  line-height: 1.6;
}

h1 {
  font-size: 2rem;
}

a {
  color: #2563eb;
}

Umumiy, bazaviy uslublar uchun: barcha paragraflar, barcha havolalar. Lekin "faqat ba'zilarini" tanlash uchun — yaramaydi.

2. Class selektori — asosiy vosita

HTML da class atributi, CSS da nuqta bilan:

<button class="btn">Bekor qilish</button>
<button class="btn btn-primary">Sotib olish</button>
<button class="btn btn-danger">O'chirish</button>

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: #e2e8f0;
  cursor: pointer;
}

.btn-primary {
  background: #2563eb;
  color: white;
}

.btn-danger {
  background: #dc2626;
  color: white;
}

• Bitta class — ko'p elementlarda ishlatilishi mumkin
• Bitta elementda — bir nechta class (bo'shliq bilan): class="btn btn-primary"
• .btn umumiy shaklni beradi, .btn-primary faqat rangni o'zgartiradi — kod takrorlanmaydi

Muammo hal bo'ldi: hammasi .btn, ikkitasiga qo'shimcha class.

Bir nechta class birga

.btn.btn-primary { ... }   /* ikkala class ham bor elementlar (oraliqsiz!) */

[!WARNING] .btn.btn-primary (oraliqsiz) va .btn .btn-primary (oraliq bilan) — butunlay boshqa narsa. Oraliqsiz — "ikkala class ham bitta elementda". Oraliq bilan — ".btn ichidagi .btn-primary" (4-dars). Bitta bo'shliq natijani o'zgartiradi.

Class nomlash

• Ma'noga qarab, ko'rinishga emas: .btn-danger ✅, .red-button ❌ (ertaga qizil emas, to'q sariq bo'lsa-chi?)
• Kichik harflar va chiziqcha: .product-card, .nav-link
• Loyiha bo'ylab bir xil uslub. Mashhur metodologiya — BEM: .card, .card__title, .card--featured

3. ID selektori

HTML da id, CSS da panjara #:

<header id="site-header">...</header>

#site-header {
  position: sticky;
  top: 0;
}

• id sahifada yagona bo'lishi kerak — bitta element
• Specificity si juda yuqori (5-dars) — keyin uni class bilan o'zgartirib bo'lmaydi

[!TIP] Stil berish uchun class ishlating. id ni JavaScript (getElementById), sahifa ichidagi havolalar (href="#bolim") va forma label lari uchun qoldiring. Ko'p jamoalarning CSS qo'llanmalarida id selektori umuman taqiqlangan.

4. Universal selektor

Yulduzcha * — har qanday element:

* {
  margin: 0;
  padding: 0;
}

Ko'pincha reset uchun (1-dars):

*,
*::before,
*::after {
  box-sizing: border-box;
}

Biror element ichidagi hamma narsa:

.card * {
  color: inherit;
}

Selektorlarni guruhlash

Bir xil stil bir nechta selektorga — vergul bilan:

h1,
h2,
h3 {
  font-family: Georgia, serif;
  line-height: 1.2;
}

.btn-primary,
.btn-danger {
  color: white;
}

Har birini alohida yozishdan qisqaroq va o'zgartirish bir joyda.

[!INFO] Guruhdagi bitta selektor noto'g'ri bo'lsa (masalan, brauzer tushunmaydigan yangi pseudo-class), butun guruh e'tiborsiz qoldiriladi. Yangi va eksperimental selektorlarni alohida qoidaga yozing.

Element + class

Teg va class birga — "faqat shu tegdagi shu class":

a.btn {
  text-decoration: none;   /* havola ko'rinishidagi tugmalarning tagiga chiziq bo'lmasin */
}

p.izoh {
  font-size: 14px;
  color: #64748b;
}

Kamdan-kam kerak bo'ladi — odatda faqat class yetarli va selektor qisqa bo'lgani yaxshi.

Amaliy misol: mahsulot kartochkasi

<article class="product-card">
  <img class="product-card__image" src="noutbuk.jpg" alt="Noutbuk">
  <h3 class="product-card__title">Noutbuk Pro 14</h3>
  <p class="product-card__price">12 500 000 so'm</p>
  <button class="btn btn-primary">Savatga</button>
</article>

.product-card {
  max-width: 280px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.product-card__image {
  width: 100%;
  border-radius: 8px;
}

.product-card__title {
  font-size: 18px;
  margin: 12px 0 4px;
}

.product-card__price {
  font-weight: 700;
  color: #16a34a;
}

Har bir qism — o'z class i. Sahifada 100 ta kartochka bo'lsa ham — bir xil CSS.

Nima uchun shunday?

Nima uchun CSS da class lar asosiy vosita bo'lib qoldi — teg selektorlari bilan ham ishlasa bo'ladi-ku?

Chunki teg selektorlari HTML tuzilmasiga bog'langan: p uslubini o'zgartirsangiz — saytdagi barcha paragraflar o'zgaradi, kerak bo'lmaganlari ham. Class esa niyatni bildiradi: "bu — narx", "bu — asosiy tugma". HTML tuzilmasi o'zgarsa (p ni span ga almashtirsangiz), class saqlanadi va dizayn buzilmaydi. Bundan tashqari, class larning specificity si o'rtacha — ular bir-birini osongina o'zgartira oladi, id lar esa "devor" bo'lib qoladi. Shuning uchun zamonaviy CSS — asosan class lar, va Tailwind kabi butun freymvorklar ham faqat class lar ustiga qurilgan.

Xulosa

Eslab qoling:

• Teg p — barcha shunday elementlar; bazaviy uslublar uchun
• Class .btn — asosiy vosita; ko'p elementda, bir elementda ko'p class
• ID #header — yagona element; stil uchun ishlatmaslik afzal
• Universal * — hamma elementlar; reset uchun
• Guruhlash — vergul: h1, h2, h3 { }
• .a.b (oraliqsiz) — ikkala class bitta elementda; .a .b — ichma-ich
• Class nomi — ma'noga qarab: .btn-danger, .red emas

Keyingi dars

3-dars: Selektorlar — attribute, pseudo-class, pseudo-element