CSS psevdo-klasslar
CSS psevdo-klasslar
CSS psevdo-klass — elementning maxsus holati uchun uslub belgilash maqsadida selektorga qo‘shilishi mumkin bo‘lgan kalit so‘z.
Psevdo-klasslarning ba’zi keng tarqalgan qo‘llanilishlari:
- Foydalanuvchi sichqonchani element ustiga olib borganda unga uslub berish
- Tashrif buyurilgan va buyurilmagan havolalarga turlicha uslub berish
- Element fokus olganda unga uslub berish
- To‘g‘ri/noto‘g‘ri/majburiy/ixtiyoriy forma elementlariga uslub berish
- Ota elementining birinchi bolasi bo‘lgan elementga uslub berish
Sintaksis
Psevdo-klasslar har doim bitta ikki nuqta (:) va undan keyin keladigan psevdo-klass nomi bilan belgilanadi:
selector:pseudo-class-name {
CSS properties
}
Quyidagi jadvalda CSS’dagi barcha psevdo-klass kalit so‘zlari keltirilgan:
| Psevdo-klass | Misollar | Misol tavsifi |
|---|---|---|
| :active | a:active | Faol havolani tanlaydi |
| :any-link | a:anylink area:anylink |
href atributiga ega istalgan <a> yoki <area> elementini tanlaydi |
| :auto-fill | input:autofill | Qiymati brauzer tomonidan avtomatik to‘ldirilgan istalgan <input> elementini tanlaydi |
| :checked | input:checked option:checked |
Belgilangan (checked) istalgan <input> yoki <option> elementiga mos keladi |
| :default | input:default button:default option:default |
Bog‘liq elementlar guruhida standart (default) bo‘lgan forma elementlarini tanlaydi |
| :defined | :defined | Aniqlangan (defined) istalgan elementni tanlaydi (standart yoki maxsus elementlar) |
| :dir() | :dir(ltr) :dir(rtl) |
Ko‘rsatilgan matn yo‘nalishiga ega istalgan elementni tanlaydi |
| :disabled | :disabled input:disabled option:disabled |
O‘chirilgan (disabled) istalgan elementni tanlaydi. Asosan forma elementlari uchun ishlatiladi |
| :empty | div:empty | Hech qanday bolasi (jumladan, matn tugunlari) bo‘lmagan istalgan elementni tanlaydi |
| :enabled | :enabled input:enabled |
Yoqilgan (enabled) istalgan elementni tanlaydi. Asosan forma elementlari uchun ishlatiladi |
| :first | @page :first | Chop etiladigan hujjatning birinchi sahifasini ifodalaydi (@page qoidasi bilan ishlatiladi) |
| :first-child | p:first-child li:first-child |
Ota elementining birinchi bolasi bo‘lgan elementni tanlaydi (qo‘shni elementlar guruhi orasida) |
| :first-of-type | p:first-of-type li:first-of-type |
Qo‘shni elementlar guruhi orasida o‘z turidagi birinchi elementni tanlaydi |
| :focus | input:focus select:focus |
Fokus olgan elementni tanlaydi. Asosan forma elementlari uchun ishlatiladi |
| :focus-visible | button:focus-visible | Fokus olgan elementni tanlaydi (fokus uslublarini faqat fokus sichqoncha bilan emas, klaviatura bilan berilganda qo‘llash uchun ishlatiladi) |
| :focus-within | form:focus-within label:focus-within |
Element yoki uning istalgan avlodi fokus olsa, shu elementga mos keladi |
| :fullscreen | :fullscreen | Hozirda to‘liq ekran rejimida bo‘lgan istalgan elementni tanlaydi |
| :has() | h2:has(+p) | Bevosita ortidan p elementi keladigan h2 elementlarini tanlaydi va uslubni h2 ga qo‘llaydi |
| :hover | a:hover p:hover |
Sichqoncha ustiga olib borilganda elementni tanlaydi |
| :in-range | input:in-range | Qiymati ko‘rsatilgan diapazon chegarasi ichida bo‘lgan istalgan <input> elementini tanlaydi |
| :indeterminate | input:indeterminate | Noaniq (indeterminate) holatdagi istalgan forma elementini tanlaydi |
| :invalid | input:invalid fieldset:invalid |
Noto‘g‘ri (invalid) forma elementlarini tanlaydi |
| :is() | :is(ul, ol) | Barcha <ul> va <ol> elementlarini tanlaydi |
| :lang() | p:lang(it) | lang atributi "it" (italyan tili) ga teng bo‘lgan istalgan <p> elementini tanlaydi |
| :last-child | li:last-child | Ota elementining oxirgi bolasi bo‘lgan istalgan <li> elementini tanlaydi |
| :last-of-type | p:last-of-type | Ota elementining oxirgi <p> elementi bo‘lgan istalgan <p> elementini tanlaydi |
| :left | @page :left | Chop etiladigan hujjatning barcha chap sahifalarini ifodalaydi (@page qoidasi bilan ishlatiladi) |
| :link | a:link | Tashrif buyurilmagan istalgan havolani tanlaydi |
| :modal | :modal | Modal holatdagi elementni tanlaydi |
| :not() | :not(p) | <p> elementi bo‘lmagan istalgan elementni tanlaydi |
| :nth-child() | p:nth-child(2) | Ota elementining ikkinchi bolasi bo‘lgan istalgan <p> elementini tanlaydi |
| :nth-last-child() | p:nth-last-child(2) | Oxiridan sanaganda ota elementining ikkinchi bolasi bo‘lgan istalgan <p> elementini tanlaydi |
| :nth-last-of-type() | p:nth-last-of-type(2) | Oxiridan sanaganda ota elementining ikkinchi <p> elementi bo‘lgan istalgan <p> elementini tanlaydi |
| :nth-of-type() | p:nth-of-type(2) | Ota elementining ikkinchi <p> elementi bo‘lgan istalgan <p> elementini tanlaydi |
| :only-child | p:only-child | Ota elementining yagona bolasi bo‘lgan istalgan <p> elementini tanlaydi |
| :only-of-type | p:only-of-type | Ota elementining yagona <p> elementi bo‘lgan istalgan <p> elementini tanlaydi |
| :optional | input:optional select:optional textarea:optional |
"required" atributi bo‘lmagan istalgan <input>, <select> yoki <textarea> elementlarini tanlaydi |
| :out-of-range | input:out-of-range | Qiymati ko‘rsatilgan diapazon chegarasidan tashqarida bo‘lgan istalgan <input> elementini tanlaydi |
| :placeholder-shown | input:placeholder-shown textarea:placeholder-shown |
Hozirda placeholder matnini ko‘rsatayotgan istalgan <input> yoki <textarea> elementini tanlaydi |
| :popover-open | :popover-open | Ko‘rsatilayotgan popover holatidagi istalgan elementni tanlaydi |
| :read-only | input:read-only | "readonly" atributi ko‘rsatilgan input elementlarini tanlaydi |
| :read-write | input:read-write | Tahrirlanadigan input elementlarini tanlaydi |
| :required | input:required | "required" atributi ko‘rsatilgan input elementlarini tanlaydi |
| :right | @page :right | Chop etiladigan hujjatning barcha o‘ng sahifalarini ifodalaydi (@page qoidasi bilan ishlatiladi) |
| :root | :root | Hujjatning root elementini tanlaydi |
| :scope | :scope | Selektorlar moslashtiriladigan tayanch nuqta yoki ko‘rinish sohasi (scope) bo‘lgan elementlarni tanlaydi |
| :state() | :state() | Ko‘rsatilgan maxsus holatga ega maxsus elementlarni tanlaydi |
| :target | :target | Joriy faol nishon (target) elementni tanlaydi |
| :user-invalid | :user-invalid | Qiymati noto‘g‘ri bo‘lgan istalgan forma elementini tanlaydi (foydalanuvchi u bilan o‘zaro ishlagandan keyin) |
| :user-valid | :user-valid | Qiymati to‘g‘ri bo‘lgan istalgan forma elementini tanlaydi (foydalanuvchi u bilan o‘zaro ishlagandan keyin) |
| :valid | input:valid | Qiymati to‘g‘ri bo‘lgan barcha input elementlarini tanlaydi |
| :visited | a:visited area:visited |
Tashrif buyurilgan barcha havolalarni tanlaydi |
| :where() | :where(ol, ul) | Barcha <ul> va <ol> elementlarini tanlaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!