CSS selektorlar
CSS selektorlari
CSS selektorlari uslublashni xohlagan HTML elementlarini "topish" (yoki tanlash) uchun ishlatiladi.
CSS selektorlarini beshta toifaga bo‘lish mumkin:
- Oddiy selektorlar (elementlarni nom, id, klass asosida tanlaydi)
- Kombinator selektorlar (elementlar orasidagi o‘zaro munosabatga qarab tanlaydi)
- Psevdo-sinf selektorlari (elementlarni ma’lum bir holatiga qarab tanlaydi)
- Psevdo-element selektorlari (elementning ma’lum bir qismini tanlaydi va uslublaydi)
- Atribut selektorlari (elementlarni atributi yoki atribut qiymatiga qarab tanlaydi)
Bu sahifa eng asosiy CSS selektorlarini tushuntiradi.
CSS element selektori
Element selektori HTML elementlarini element nomi asosida tanlaydi.
Misol
Bu yerda sahifadagi barcha <p> elementlari markazga tekislangan va qizil matn rangida bo‘ladi:
p
{
text-align: center;
color: red;
}
O‘zingiz sinab ko‘ring »
CSS id selektori
id selektori muayyan elementni tanlash uchun HTML elementining id atributidan foydalanadi.
Elementning id si sahifa ichida yagona bo‘ladi, shu sababli id selektori bitta yagona elementni tanlash uchun ishlatiladi!
Muayyan id li elementni tanlash uchun panjara (#) belgisini yozing va undan keyin element id sini yozing.
Misol
Quyidagi CSS qoidasi id="para1" li HTML elementiga qo‘llanadi:
#para1
{
text-align: center;
color: red;
}
O‘zingiz sinab ko‘ring »
Eslatma: id nomi raqam bilan boshlanishi mumkin emas!
CSS klass selektori
Sinf (class) selektori ma’lum bir class atributiga ega HTML elementlarini tanlaydi.
Muayyan klassga ega elementlarni tanlash uchun nuqta (.) belgisini yozing va undan keyin klass nomini yozing.
Misol
Bu misolda class="center" li barcha HTML elementlari qizil va markazga tekislangan bo‘ladi:
.center {
text-align: center;
color: red;
}
O‘zingiz sinab ko‘ring »
Faqat muayyan HTML elementlarga klass ta’sir qilishini ham belgilashingiz mumkin.
Misol
Bu misolda faqat class="center" li <p> elementlari qizil va markazga tekislangan bo‘ladi:
p.center {
text-align: center;
color: red;
}
O‘zingiz sinab ko‘ring »
HTML elementlari bir nechta sinflarga ham murojaat qilishi mumkin.
Misol
Bu misolda <p> elementi class="center" va class="large" bo‘yicha uslublanadi:
<p class="center large">This paragraph refers to two classes.</p>
O‘zingiz sinab ko‘ring »
Eslatma: Klass nomi raqam bilan boshlanishi mumkin emas!
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!