Selectors

Select so'zi tanlash deb tarjima qilinadi. Slector so'zini tanlovchi deb tarjima qilsak bo'ladi. Demak Selectors so'zini tanlovchilar deb tushunib olsak bo'ladi. Darslarda selektor so'zini ishlatamiz.

Css da selektorlar siz xohlagan Html elementni topish yoki tanlash uchun ishlatiladi. Selektorlar yordamida bir yoki undan ortiq bo'lgan elementlarni tanlash mumkin.

Css da selektorlarni 5 turga ajratish mumkin.

• Simple Selector (Oddiy selektor. Bunda elementlar nomi, id yoki class nomi orqali tanlash mumkin.)
• Combinator Selectors (Kombinatorni selektorlar. Bularni selektorlar to'plami desak bo'ladi va bunda selectorlar o'rtasida bog'liqlik bo'ladi.)
• Pseudo-class selectors ( Pseudo klass selektorlari . Bunda Element holatiga qarab tanlanadi)
• Pseudo-element selectors (Pseudo element selektorlari. Bunda elementni qismini tanlash va shuni qismini stillar uchun ishlatiladi.)
• Attribute selectors (Attribute selektorlari. Bunda elementni atributiga asosan yoki atribute qiymatiga asosan tanlash mumkin.)

Bu darsda simple selector (oddiy selektorlarni) o'rqanib chiqamiz.

Css Element Selector

Html elementlarni nomi orqali tanlash.

Html elementini o'z nomi orqali tanlasak bo'ladi.

Namuna

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

Css Id Selector

Htlm elementlarni id si orqali tanlash.

Html elementlarga id atributiga qiymat berish mumkin va shu qiymat uning idintifikatsion idsi hisoblanadi.

Id yagona, boshqa elementlarda takrorlanmagan bo'lishi kerak. Shu id oqrali elemetnida tanlash va unda stillar berish mumkin.

Css da id ni ishlatish uchun oldin # ishorani yozib undan keyin id ning qiymatini yozish kerak.

Namuna

#manaId {
      text-align: center;
      color: blue;
   }

Eslatma id son bilan boshlanmaydi.

Css Class Selector

Class selektorida elementlar class atributiga yozilgan qiymat bo'yicha tanlanadi. Yani biz aytganday klass deb ataymiz ammo aslida biz aytgan klass u class atributiga yozilgan qiymatdir.

Css da class dan foydalanishda oldin tochka (.) ishorasini yozib undan keyin class atributiga yozilgan qiymatni yozish kerak.

Namuna

.voyKlass {
      text-align: center;
      color: blue;
   }

Yozilgan klass aynan qaysi Html elementiga ta'sir qilishi kerakligini ko'rsatish mumkin.

Namuna

 p.voyKlass {
      text-align: center;
      color: blue;
   }

Html elementlariga bittadan css klasslar yozish mumkin.

Namuna

 <p class="colorRed center"> Bunda .colorRed va center klasslari yozilgan. </p>

Izoh. Namunadagi p elementi 2ta klass da yozilgan stillarga asosan stil oladi. Agar klasslarda bir xil css xususiyatlar  uchrasa oxirda kelgan css xususiyatini oladi.

Eslatma. klass nomlari sonlar bilan boshlanmaydi.

The Css Universal Selector

Css universal selektorda * ishorasi orqali barcha elemetnlarni tanlash va ularga stillar berish mumkin.

Namuna

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

Css Grouping Selector

Bir xil Css xususiyatga ega bo'lgan selectorlarni bitta selectorga ko'rinishida yozish mumkin.

Namunada h2, h3, p elementlarida bir xil stillar yozilgan. Shularni qisqa qilib bitta gurux ko'rinishida yozishimiz mumkin.

Namuna

 h2 {
      color: indianred;
      text-align: center;
   }
  
   h3 {
      color: indianred;
      text-align: center;
   }
  
   p {
      color: indianred;
      text-align: center;
   }

3 ta Selectorda bir xil css xususiyatlar yozilgan ularni bitta gurux qilib yozsak bo'ladi.

Namuna

h2, h3, p {
      color: indianred;
      text-align: center;
   }