counter-increment
Оновлено: 21.12.2022
counter-increment
Стильова властивість counter-increment призначена для збільшення значення лічильника прирощень, який задається властивістю counter-reset. Такий лічильник підраховує кількість відображень елементів на сторінці та може виводитися за допомогою властивості content та псевдоелементів ::after і ::before. Це дає змогу створювати списки (зокрема багаторівневі), у яких нумерація та вигляд задаються через стилі.
Коротка інформація
Значення за замовчуванням | none |
Успадковуєтсья | Ні |
Застосовується | До всіх елементів |
Анімується | НІ |
Синтаксис
counter-increment: [<змінна> | <число>?]+ none
Значення
none | Забороняє збільшення лічильника для поточного селектора. |
<переменная> | Задає одну або кілька змінних, для яких потрібно змінити значення лічильника. Змінні розділяються між собою пропуском. |
<число> | Визначає значення приросту лічильника. За замовчуванням воно дорівнює 1. Допускається використовувати тільки позитивні цілі числа, від'ємні цілі числа і нуль. |
Можливі поєднання значень властивостей counter-reset і counter-increment показано в табл. 1.
Код | Результат |
---|---|
| Список починається з нуля. 0, 1, 2 |
| Виводяться всі парні числа. 2, 4, 6 |
| Виводяться всі непарні числа. 1, 3, 5 |
| Список починається з 10. 10, 11, 12 |
Приклад
Об'єктна модель
Об'єкт.style.counterIncrement
Примітка
Для елементів, у яких встановлено display: none, значення лічильника не змінюється.