CSS hisoblagichlar
CSS hisoblagichlari
CSS hisoblagichlari bilan JavaScript’siz elementlarni (sarlavhalar, bo‘limlar yoki ro‘yxat elementlari kabi) dinamik raqamlash mumkin.
CSS hisoblagichlari CSS tomonidan saqlanadigan "o‘zgaruvchilar" bo‘lib, ularning qiymatlari CSS qoidalari bilan oshirilishi (yoki kamaytirilishi) mumkin.
Pizza
Hamburger
Hotdogs
CSS hisoblagichlar bilan avtomatik raqamlash
CSS hisoblagichlari "o‘zgaruvchilar"ga o‘xshaydi. O‘zgaruvchi qiymatlari CSS qoidalari bilan oshirilishi (yoki kamaytirilishi) mumkin.
CSS hisoblagichlari bilan ishlash uchun quyidagi xossalardan foydalanamiz:
counter-reset- hisoblagichni yaratadi yoki qayta o‘rnatadicounter-increment- hisoblagich qiymatini oshiradi yoki kamaytiradicontent- Inserts generated contentcounter()— hisoblagich qiymatini elementga qo‘shadi
CSS hisoblagichdan foydalanish uchun uni avval counter-reset xossasi bilan yaratish kerak.
CSS hisoblagichni oshirish va kamaytirish
Quyidagi misol sahifa uchun hisoblagich yaratadi (body selektorida), so‘ng har bir <h2> elementi uchun hisoblagich qiymatini 1 ga oshiradi:
Misol
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
O‘zingiz sinab ko‘ring »
Hisoblagichni kamaytirish
counter-increment xossasida ikkinchi parametr bor. Standart qiymat 1. Hisoblagich qiymatini kamaytirish uchun uni -1 qilib belgilashingiz mumkin.
Misol
body {
counter-reset: section;
}
h2::before {
counter-increment: section
-1;
content: "Section " counter(section) ": ";
}
O‘zingiz sinab ko‘ring »
Ixtiyoriy qiymatga oshirish
Hisoblagichni istalgan qiymatga oshirish mumkin. Bu yerda 2 ga oshiramiz:
Misol
body {
counter-reset: section;
}
h2::before {
counter-increment: section
2;
content: "Section " counter(section) ": ";
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!