Selectorlar misol

...

va ....

Element tanlovi (element) - Eng kam hossizlik darajasiga ega bo'ladi. Bu tanlov usuli, belgilangan HTML-elementlarni tanlash uchun ishlatiladi. Misol uchun,

...

.

Bularning hammasi bir hil hossizlik qiymati bilan yig'indisini beradi. Misol uchun,

...

ID tanlovi va class tanlovining yig'indisi element tanloviga o'xshaydi, lekin ular ID tanlovi bilan yig'indisidan katta hossizlik qiymatiga ega bo'ladi.
CSS-da tanlab oluvchilar (selector), bir yoki bir nechta HTML elementlarini stil qoʻllash uchun belgilaydi. Bu xususiyatlarga mos keluvchi stil qoʻllash xususiyatlari elementlar uchun belgilanadi.
CSS-da uchta turlari selectorlar mavjud: Element selectorlari, Class selectorlari, va ID selectorlari.

• 
  Element selectorlari, HTML elementlarini belgilash uchun ishlatiladi. Misol uchun, "p" selectori barcha HTML "p" elementlari uchun stil qoʻllashni belgilaydi. - Class selectorlari, bir yoki bir nechta elementlarning stil qoʻllashini belgilash uchun ishlatiladi. Class selectorlari "." belgisi bilan belgilanadi. Misol uchun, ".my-class" selectori barcha HTML elementlari uchun qoʻllanadigan "my-class" nomli klassga mos keluvchi stil qoʻllash xususiyatlarini belgilaydi.
  
• 
  ID selectorlari, faqat bir elementning stil qoʻllashini belgilash uchun ishlatiladi. ID selectorlari "#" belgisi bilan belgilanadi. Misol uchun, "#my-id" selectori "myid" nomli HTML element uchun qoʻllanadigan stil qoʻllash xususiyatlarini belgilaydi.
  

CSS-da selectorlar tarqalishiga mos keluvchi stil qoʻllash xususiyatlari bor, bu hoslik (specificity) deb ataladi. Hoslikni element selectorlari < class selectorlari < ID selectorlari tartibida hisoblanadi. Bunday tartibda, hoslik oshirilganda, birinchi chiqadigan stil qoʻllash xususiyatlari oʻzgartiriladi. Misol uchun, ".my-class" va "#my-id" selectorlari bir xil element uchun ishlatilsa, "#my-id" selectori hosligi "my-class" selectori hosligidan yuqori boʻladi. Shuningdek, bitta element uchun bir nechta stil qoʻllash xususiyatlari borligida, hoslik oshirilganda, birinchi chiqadigan xususiyat oʻzgartiriladi.
CSS-da bir nechta turdagi selectorlar mavjud:

1. 
   Element Selectorlari: Element selectorlari, HTML elementlariga mos keladi va belgilanishi juda oson. Element nomi bilan belgilanadi. Misol uchun, `p`, `div`, `ul`, `li` kabi.
   
2. 
   ID Selectorlari: ID selectorlari, HTML elementlari uchun unikal belgilar qoʻyadi. ID belgisi (#) orqali belgilanadi. Misol uchun, `#header`, `#main-content` kabi.
   
3. 
   Class Selectorlari: Class selectorlari, HTML elementlariga mos kelish uchun belgilanadi. Class belgisi (.) orqali belgilanadi. Bir elementga bir nechta class qoʻyish mumkin. Misol uchun, `.btn`, `.container`, `.text-center` kabi. 4. Universal Selector: Universal selector (`*`) barcha elementlarga mos keladi.
   

5. 
   Attribute Selectorlari: Attribute selectorlari, bir yoki bir nechta HTML elementlarning attributlari bilan mos keladi. Attribute nomi va qiymati orqali belgilanadi. Misol uchun, `[type="text"]`, `[href]`, `[class^="btn"]` kabi.
   
6. 
   Pseudo-Class Selectorlari: Pseudo-class selectorlari, elementning holatiga qarab mos keladi. Misol uchun, `:hover`, `:active`, `:focus` kabi.
   
7. 
   Pseudo-Element Selectorlari: Pseudo-element selectorlari, elementning maʼlum bir qismini tanlash uchun ishlatiladi. Misol uchun, `::before`, `::after` kabi.
   
8. 
   Combinatorlar: Combinatorlar, bir nechta selectorlarni bir-biriga bogʻlash uchun ishlatiladi. Misol uchun, `div p`, `ul > li`, `header + nav` kabi.
   

9.Element Selector: Elementlarni tanlash uchun ishlatiladi. Masalan: p { color: blue; }
ID Selector: Faqat bir elementni tanlash uchun ishlatiladi. ID ochilgandan so'ng "#" simvoli bilan boshqa bo'lmasligi kerak. Masalan: #header { background-color: green; }
Class Selector: Bitta yoki bir nechta elementni tanlash uchun ishlatiladi. Classlarni tanlash uchun "." belgi bilan boshqa bo'lmasligi kerak. Masalan: .menu { font-size:
18px; }
Attribute Selector: Attributlarni tanlash uchun ishlatiladi. Masalan: input[type='text'] { background-color: #e6e6e6; }
Pseudo Selector: HTML element ittalari ustida bo'lgan holatlar uchun ishlatiladi.