CSS psevdo-elementlar
CSS psevdo-elementlar
CSS psevdo-elementi elementning muayyan qismlariga uslub berish uchun ishlatiladi.
Masalan, undan quyidagilar uchun foydalanish mumkin:
- Elementning birinchi harfi yoki qatoriga uslub berish
- Elementdan oldin yoki keyin kontent qo‘shish
- Ro‘yxat elementlarining markerlariga uslub berish
- Dialog oynasi orqasidagi ko‘rinish sohasiga (viewbox) uslub berish
Quyidagi jadvalda CSS’dagi turli psevdo-elementlar ko‘rsatilgan:
| Psevdo-element | Misol | Misol tavsifi |
|---|---|---|
| ::after | p::after div::after |
Ko‘rsatilgan element kontentidan keyin biror narsa qo‘shadi |
| ::backdrop | dialog::backdrop | Dialog oynasi yoki popover elementi orqasidagi ko‘rinish sohasiga (viewbox) uslub beradi |
| ::before | p::before div::before |
Ko‘rsatilgan element kontentidan oldin biror narsa qo‘shadi |
| ::file-selector-button | ::file-selector-button | <input type="file"> turidagi istalgan tugmani tanlaydi |
| ::first-letter | p::first-letter | Har bir <p> elementining birinchi harfini tanlaydi |
| ::first-line | p::first-line | Har bir <p> elementining birinchi qatorini tanlaydi |
| ::grammar-error | ::grammar-error | Brauzer grammatik jihatdan noto‘g‘ri deb belgilagan matnga uslub beradi |
| ::highlight() | ::highlight(custom-name) | Maxsus ajratib ko‘rsatishni (custom highlight) tanlaydi |
| ::marker | ::marker | Ro‘yxat elementlarining markerlarini tanlaydi |
| ::placeholder | input::placeholder textarea::placeholder |
<input> yoki <textarea> elementlarining placeholder matniga uslub beradi |
| ::selection | ::selection | Foydalanuvchi tanlagan (belgilagan) matnga uslub beradi |
| ::spelling-error | ::spelling-error | Brauzer imlo jihatdan noto‘g‘ri yozilgan deb belgilagan matnga uslub beradi |
| ::view-transition | ::view-transition | Sahifadagi barcha view transition’larni o‘z ichiga olgan view transition qoplamasining root elementini ifodalaydi |
| ::view-transition-group | ::view-transition-group | Bitta view transition surati (snapshot) guruhini ifodalaydi |
| ::view-transition-image-pair | ::view-transition-image-pair | View transition’ning "eski" va "yangi" ko‘rinish holatlari — o‘tishdan oldingi va keyingi holatlar uchun konteynerni ifodalaydi |
| ::view-transition-new | ::view-transition-new | View transition’ning "yangi" ko‘rinish holatini ifodalaydi |
| ::view-transition-old | ::view-transition-old | View transition’ning "eski" ko‘rinish holatini ifodalaydi |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!