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.

Табл. 1. Зміна нумерації списку
Код Результат
li { list-style-type: none; }
ol { counter-reset: list -1; }
li::before {
  counter-increment: list;
  content: counter(list) ". ";
}

Список починається з нуля.

0, 1, 2 

li { list-style-type: none; }
ol { counter-reset: list; }
li::before {
  counter-increment: list 2;
  content: counter(list) ". ";
}

Виводяться всі парні числа.

2, 4, 6 

li { list-style-type: none; }
ol { counter-reset: list -1; }
li::before {
  counter-increment: list list;
  content: counter(list) ". ";
}

Виводяться всі непарні числа.

1, 3, 5 

li { list-style-type: none; }
ol { counter-reset: list 9; }
li::before {
  counter-increment: list;
  content: counter(list) ". ";
}

Список починається з 10.

10, 11, 12

Приклад

Об'єктна модель

Об'єкт.style.counterIncrement

Примітка

Для елементів, у яких встановлено display: none, значення лічильника не змінюється.

Браузери

counter-increment

Переглянути сумісність з Can I use?

counter-increment