CSS Selektorlar

CSS Selektorlar

CSS selektori siz uslub bermoqchi bo'lgan HTML element(lar)ni tanlaydi.

CSS selektorlari siz uslub bermoqchi bo'lgan HTML elementlarini "topish" (yoki tanlash) uchun ishlatiladi.

Biz CSS selektorlarini besh toifaga bo'lishimiz mumkin:

1. Oddiy selektorlar (elementlarni nomi, id, class asosida tanlaydi)
2. Kombinator selektorlar (elementlarni ularning o'rtasidagi o'zaro bog'liqlik asosida tanlaydi)
3. Pseudo-class selektorlar (elementlarni ma'lum bir holatga qarab tanlaydi)
4. Pseudo-element selektorlar (elementning bir qismini tanlaydi va uslub beradi)
5. Atribut selektorlar (elementlarni atribut yoki atribut qiymatiga qarab tanlaydi)

Ushbu sahifa eng asosiy CSS selektorlarini tushuntiradi.

CSS Element Selektori

Element selektori HTML elementlarini element nomiga asoslanib tanlaydi.

Misol Bu yerda, sahifadagi barcha <p> elementlari o'rtaga tekislanadi va matn rangi qizil bo'ladi:

p {
  text-align: center;
  color: red;
}

CSS ID Selektori

ID selektori HTML elementining id atributidan foydalanib, muayyan elementni tanlaydi.

Elementning id atributi sahifa ichida noyob bo'ladi, shuning uchun id selektori faqat bitta noyob elementni tanlash uchun ishlatiladi!

Muayyan idga ega elementni tanlash uchun id qiymati oldidan # belgisini qo'shing.

Misol Quyidagi CSS qoidasi id="para1" bo'lgan HTML elementiga qo'llaniladi:

#para1 {
  text-align: center;
  color: red;
}

Eslatma: id nomi raqam bilan boshlanmasligi kerak!

CSS Class Selektori

Class selektori muayyan class atributiga ega HTML elementlarni tanlaydi.

Muayyan classga ega elementlarni tanlash uchun . (nuqta) belgisini yozib, undan keyin class nomini yozing.

Misol Ushbu misolda class="center" bo'lgan barcha HTML elementlari qizil va o'rtaga tekislanadi:

.center {
  text-align: center;
  color: red;
}

Shuningdek, faqat muayyan HTML elementlar class bilan uslub berilishi kerakligini belgilashingiz mumkin.

Misol Bu misolda faqat class="center" bo'lgan <p> elementlari qizil va o'rtaga tekislanadi:

p.center {
  text-align: center;
  color: red;
}

HTML elementlar bir nechta classga murojaat qilishi ham mumkin.

Misol Bu misolda <p> elementi class="center" va class="large"ga muvofiq uslublanadi:

<p class="center large">Bu paragraf ikki classga murojaat qiladi.</p>

Eslatma: class nomi raqam bilan boshlanmasligi kerak!

CSS Universal Selektori

Universal selektor (*) sahifadagi barcha HTML elementlarini tanlaydi.

Misol Quyidagi CSS qoidasi sahifadagi har bir HTML elementiga ta'sir qiladi:

* {
  text-align: center;
  color: blue;
}

CSS Guruhlash Selektori

Guruhlash selektori bir xil uslub ta'riflari bo'lgan barcha HTML elementlarni tanlaydi.

Quyidagi CSS kodiga e'tibor bering (h1, h2, va p elementlari bir xil uslub ta'riflariga ega):

h1 {
  text-align: center;
  color: red;
}
 
h2 {
  text-align: center;
  color: red;
}
 
p {
  text-align: center;
  color: red;
}

Kodni qisqartirish uchun selektorlarni guruhlash yaxshiroq bo'ladi.

Selektorlarni guruhlash uchun har bir selektorni vergul bilan ajrating.

Misol Bu misolda yuqoridagi koddan selektorlarni guruhladik:

h1,
h2,
p {
  text-align: center;
  color: red;
}

Mashqlar bilan o'zingizni sinab ko'ring

Mashq: Barcha <p> elementlarining matn rangini qizil rangga sozlang.

<style>
  p {
    color: red;
  }
</style>

Barcha CSS Oddiy Selektorlari