CSS Selektorlar

CSS Selektori nomi bilan ham aytib turibdi, siz bezak bermoqchi bo'lgan HTML elementlarini belgilaydi.

CSS Selektorlari

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

Biz CSS selektorlarini beshta kategoriyaga bo'la olamiz:

• Oddiy selektorlar (elementlarni teg nomi, id-si va classiga qarab topadi)

• Kombinator selektorlar (elementlarni ular orasidagi ma'lum munosabatiga qarab tanlaydi)

• Pseudo-class selektorlar (elementlarni ma'lum bir holatga qarab tanlaydi)

• Pseudo-elementlar selektorlari (elementni ma'lum bir qismini tanlaydi va still beradi)

• Attribut selektorlari (elementlarni attribut nomiga yoki attribut qiymatiga qarab belgilaydi)

Ushbu sahifada asosan boshlang'ich CSS selektorlari tushuntirilgan.

CSS element selektori

Element selektori HTML elementlarini nomiga qarab tanlaydi.message = "hello world"

CSS

Ushbu misolda barcha <p> elementlari o'rtada turadi va qizil rangda bo'ladi:

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

CSS id selektori

id selektori elementni tanlash uchun HTML elementining id atributidan foydalanadi.

Elementning id-si sahifada bitta bo'ladi, shuning uchun id selektori bitta unikal elementni tanlash uchun ishlatiladi!

id-ga ega elementni tanlash uchun xesh (#) belgisini va undan keyin elementning id nomini yozing.

CSS

Ushbu misoldagi css kod id="para1" attributiga ega elementga qo'llaniladi:

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

W3Schools online HTML editor

Note: id hech qachon raqam bilan boshlanmaydi!

CSS class selektori

Class selektori HTML elemntlarini class attributiga qarab tanlaydi.

Class attributiga ega elementlarni tanlash uchun nuqta (.) belgisini va undan keyin class nomini yozing.

CSS

Ushbu misoldagi css kod class="center" ga ega barcha HTML elementlarining rangizni qizil qiladi va uni markazga to'g'irlaydi:

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

https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class

Bundan tashqari, classni faqat maxsus HTML elementlariga ta'sir qilishi kerakligini belgilashingiz mumkin.

CSS

Ushbu misolda faqatgina class="center" ga ega

elementlari tanlangan va stil qiymatlari qizil va joylashuvi o'rtaga o'zgartirilgan:

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

W3Schools online HTML editor

HTML elementlari bittadan ortiq classlarni o'z ichiga olishi mumkin.

CSS

Ushbu misolda <p> elementi bir vaqtni o'zida class="center" va class="large" larni jamlamoqda:

<p class="center large">This paragraph refers to two classes.</p>

Note: Class nomi raqam bilan boshlanmaydi!

CSS Universal selektor

Universal selektor sahifadagi barcha HTML elementlarini belgilaydi.

CSS

CSS qoidasiga ko'ra quyidagi misolda barcha HTML elementlari tanlanadi:

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

W3Schools online HTML editor

CSS Guruhlash selektorlari

Guruhlash selektori bir xil css kodlari bilan berilgan barcha HTML elementlarini tanlaydi.

Quyidagi CSS kodga e'tiboringizni qarating (h1, h2 va p elementlariga bir xil still qiymatlari berilgan):

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

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

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

Bunday uzun kodni guruhlash selektorlari yordamida qisqartirishingiz mumkin.

Guruh selektorlaridan foydalanish uchun har bir element nomidan keyin vergul orqali ajratish kerak.

CSS

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

W3Schools online HTML editor

Barcha oddiy CSS selektorlari

Selektor	Misol	Ta'rif
#id	#firstname	id="firstname" attributiga ega elementni tanlaydi
.class	.intro	class="intro" ga ega elementlarni tanlaydi
element.class	p.intro	Faqatgina class="intro" ga ega <p> elementlarini tanlaydi
*	*	Barcha elementlarni tanlaydi
element	p	Barcha <p> elementlarini tanlaydi
element,element,...	div, p	Barcha <div> va <p> elementlarini tanlaydi