CSS selektorlari
CSS selektorlari
CSS selektorlari siz uslub bermoqchi bo‘lgan HTML elementlarini "topish" (yoki tanlash) uchun ishlatiladi.
Turli selektorlarni namoyish qilish uchun CSS selektor testerimizdan foydalaning.
CSS oddiy selektorlari
Oddiy selektorlar elementlarni element nomi, id va class asosida tanlaydi. Bundan tashqari, universal selektor (*) ham mavjud.
| Selektor | Misol | Misol tavsifi |
|---|---|---|
| element | p | Barcha <p> elementlarini tanlaydi |
| #id | #firstname | id="firstname" bo‘lgan elementni tanlaydi |
| * | * | Barcha elementlarni tanlaydi |
| .class | .intro p.intro |
class="intro" bo‘lgan barcha elementlarni tanlaydi class="intro" bo‘lgan barcha <p> elementlarini tanlaydi |
CSS atribut selektorlari
Atribut selektori berilgan atributi o‘rnatilgan HTML elementlarini tanlaydi.
| Selektor | Misol | Misol tavsifi |
|---|---|---|
| [attribute] | [lang] | lang atributiga ega barcha elementlarni tanlaydi |
| [attribute=value] | [lang="it"] | lang="it" bo‘lgan barcha elementlarni tanlaydi |
| [attribute~=value] | [title~="flower"] | title atributida "flower" so‘zi bo‘lgan barcha elementlarni tanlaydi |
| [attribute|=value] | [lang|="en"] | lang atributi qiymati "en" ga teng yoki "en-" bilan boshlanadigan barcha elementlarni tanlaydi |
| [attribute^=value] | [href^="https"] | href atributi qiymati "https" bilan boshlanadigan barcha elementlarni tanlaydi |
| [attribute$=value] | [href$=".pdf"] | href atributi qiymati ".pdf" bilan tugaydigan barcha elementlarni tanlaydi |
| [attribute*=value] | [href*="w3schools"] | href atributi qiymatida "w3schools" substringi bo‘lgan barcha elementlarni tanlaydi |
CSS nesting (ichma-ich joylashtirish) selektori
| Selektor | Misol | Misol tavsifi |
|---|---|---|
| & | & | Boshqa element konteksti ichidagi element uchun uslublarni qo‘llaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!