Kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi

9. Atribut selektorlari
Ko'pincha shakllar bilan ishlashda ishlatiladi. Atribut selektorlari kvadrat qavs elementi [atribut] yordamida yoziladi.
Atribut selektoriga misollar:
kiritish kiritish div a a a a
Yuqoridagi misolda ~ atributlarning vergul bilan ajratilgan ro'yxatidan ma'lum bir atributni tanlash imkonini beradi, masalan:
10. Global selektor


Kaskaddan foydalanish
HTMLda CSS identifikatorlarini tanlashda siz kaskad xususiyatidan ham foydalanishingiz mumkin. Misol uchun, agar identifikatorli teg ichida ba'zi bir bola tegni tanlash va uning xususiyatlarini o'zgartirish kerak bo'lsa, avval identifikator nomini xesh bilan yozishingiz kerak, keyin esa pastki teg va uning xususiyatlarini yozishingiz kerak. Bunday selektorlar ichki ichki deb ataladi. Ya'ni, kod qatori shunday ko'rinadi: "#id p (rang: ko'k)". Keyin ushbu identifikatorga ega bo'lgan asosiy element ichida pastki paragraf matn rangini ko'k rangga o'zgartiradi.
Bola element tanlagichlaridan foydalanish
Bola elementlarning xususiyatlarini o'zgartirish uchun kaskaddan foydalanishning yana bir usuli - bu faqat ma'lum bir kod qismini tanlashni xohlayotganingizda. U nasl selektori deb ham ataladi. Masalan, jadval qatoridagi paragrafni tanlash uchun quyidagi CSS selektor yozuvi ishlatiladi: "ul li > p: (rang: ko'k)". Shunisi e'tiborga loyiqki, yozuv qancha uzoq bo'lsa, elementning ma'lum bir xususiyatini o'zgartirish ehtimoli shunchalik yuqori bo'ladi, chunki u kaskad uchun ustuvor ahamiyatga ega bo'ladi. Masalan, ota-ona bo'lgan sinfdagi boshqa CSS selektor xususiyatiga ega elementlar o'z xususiyatlarini to'liq o'zgartirmaydi. Ro'yxat ichidagi matnning faqat ma'lum bir qismi qayta ranglanadi.
Opa-singil element selektori
Kaskaddan foydalanishning yana bir qiziqarli usuli qo'shni CSS selektorlaridir. Ular selektorlar yig'indisi sifatida yoziladi: "span + a (rang ko'k)". Bunday holda, qo'shni talab qilinadigan parametrlarga mos keladigan boshqasi mavjud bo'lgan qo'shni hisoblanadi. Shunday qilib, agar kodda uchta element mavjud bo'lsa, unda mulk ularning birinchisiga qo'llanilmaydi, chunki uning qo'shnisi yo'q, lekin keyingi barchaga - ha. Buning sababi, oldingilar emas, balki ketma-ket selektorlar qo'shilganda yig'indi belgisi. Bunday yozuv kodni kamaytirishga va turli teglar uchun bir nechta CSS selektorlarini yozmaslikka yordam beradi, ularga bir xil xususiyatlarni qo'llaydi. Agar ro'yxatning ikkinchi elementiga qo'shimcha ravishda sinf berilsa va yozuv ".class + a (ko'k rang)" ga o'zgartirilsa, u holda ortga hisoblash undan boshlanadi va qoidaga mos keladigan keyingi elementlarning xususiyatlari o'zgaradi, birinchi ikkitasi esa bir xil bo'lib qoladi.



Endi faraz qilaylik, bizning kodimizda turli sinflarga ega uchta bir xil teglar mavjud va biz ma'lum biridan keyin barcha elementlarni tanlashimiz kerak. Bunday holda, faqat CSS teg tanlash vositalaridan foydalanish yordam bermaydi. Buning uchun quyidagi kabi selektordan foydalaning: ".class ~ div". Bu berilgan sinfdan keyin keladigan div tegli elementlarni tanlaydi. Agar biz faqat div tegi bo'lgan elementlarni emas, balki barcha keyingilarini ham tanlamoqchi bo'lsak, tilda belgisidan keyingi teg o'rniga yulduzcha belgisini - "*" qo'yishimiz kerak. Bunday yozuv siz berilgan sinfdan keyin keladigan hamma narsani tanlashingiz kerakligini anglatadi. Agar selektor sifatida faqat yulduzcha qoldirsangiz, umuman sahifadagi barcha elementlarni tanlashingiz mumkin.