CSS selektorlari

Selektor ma’lum bir CSS stillar qaysi elementga qo’llashni belgilaydi. Selektorlar juda kerakli narsalar, chunki ular sahifada har bir element yoki elementlar guruhi uchun indevidual stil yozish imkonini beradi. B esa xozirga zamonaviy dizayn uchun muhim.

Ba’zi tanlash mumkin bo’lmagan elementlar uchun CSS da universal selektor mavjud.

Universal selektor

Barcha elementlarni tanlaydi. Ushbu selektorga stillar ko’rsatishda e’tiborli bo’ling chunki stillar barcha elementlar uchun ta’sir qiladi bu esa so’z boshidagi selektorlar indevidual stillar uchun qulay degan fikrimizga zid oqibatlarga olib keladi. Hamma elementlaringiz bir xil stilda bo’lishi «qolip» usul deyiladi.

Sintaksis. Misol: * sahifadagi barcha elementlarga mos keladi.

Element turi bo’yicha selektorlar

Ushbu asosiy selektor qoida qo’llaniladigan elementlar turini tanlaydi.

Misol: Kirish selektori barcha elementlarini tanlaydi.

Sinf bo’yicha tanlash

Ushbu asosiy selektor elementlarni class atributining qiymatiga qarab tanlaydi.

Misol:(class=»index» atributida belgilanganidek) .index selektori tegishli sinfdagi ega barcha elementlarni tanlaydi .

ID bo’yicha tanlash

Ushbu asosiy selektor elementlarni id atributining qiymatiga qarab tanlaydi. Shuni yodda tutingki, ID noyob bo’lishi kerak, ya’ni HTML hujjatidagi faqat bitta element uchun ishlatilishi kerak. Sintaksis: #idname Misol: #toc selektori id toc (id=»toc» atributida belgilangan) bilan elementni tanlaydi.

Atribut selektorlari

Ushbu selektor berilgan atributga ega bo’lgan barcha elementlarni yoki ma’lum bir qiymatga ega atributlarni tanlaydi.

Sintaksis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 

Misol: [autoplay] selektori barcha elementlarni tanlaydi autoplay atributiga ega bo’lganlar (qiymatidan qat’iy nazar). Yana bir misol: a[href$=».jpg»] manzili «.jpg» bilan tugaydigan barcha linklarni tanlaydi. 

Yana bir misol: a[href^=»https»] manzili «https» bilan boshlangan barcha havolalarni tanlaydi.

Kombinatorlar — tanlashda birlashtirish

, belgisi 

Misol: div , span bu holatda selektorlar ko’rsatilganida CSS brauzerga barcha div va span elementlari uchun stillar belgilanishi kerakligini ko’rsatadi.

> belgisi 

Misol: div > span bu holatda stil barcha ota elementlari div bo’lgan span lar uchun ishlatilishini ko’rsatadi. Ushbu kombinatsiyani turli selektorlar bilan qo’llash mumkin yana bir misol ko’rsatib ketamiz.

.box > div > ul > li  

ul > li > a

~ belgisi 

~ selektori barcha bir biriga qo’shni bo’lgan (aka-uka) elementlar uchun stillar ko’rsatilayotganini belgilaydi.

Misol : p ~ span p elementidan keyin keladigan p elementi bilan bir ota elementga tegishli barcha span lar uchun stillar belgilanadi.

+ belgisi 

Qo’shni yoki keyingi selektorga ishora qiladi. Faqat birinchi qismda belgilangan elementdan keyin darhol joylashgan element tanlanishini ta’minlaydi.

Misol: img + span.caption stillar img hamda span tegi singi caption bo’lgan elemenlar uchun ishlaydi.