CSS selektorlar (element, class, id)

CSS qoidasining chap tomonidagi selektor qaysi HTML elementlariga 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:

p { color: #475569; }

Class selektori HTML’dagi class atributi qiymatini nuqta bilan tanlaydi. Atribut istalgan elementga berilishi mumkin, shuning uchun class eng ko’p ishlatiladigan selektordir:

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

.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:

#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

Kod

<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>

<style>
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; }
</style>

Natija

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:

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

Bo’sh joy ichkaridagi istalgan avlodni tanlaydi:

.card a { text-decoration: none; }

> faqat bevosita farzandni tanlaydi:

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:

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

Pseudo-class elementning holatini tanlaydi:

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:

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

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.

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 bilan tanlangan elementlarga vizual iyerarxiya beramiz.