Кратко
Секция статьи "Кратко"С помощью свойства counter
можно указать число (шаг), на которое будет увеличиваться нумерация CSS-счётчика.
Пример
Секция статьи "Пример"Устанавливает шаг в 2 для счётчика example
на элементе li
:
li { counter-increment: example 2;}
li { counter-increment: example 2; }
Как понять
Секция статьи "Как понять"Например, есть какой-то установленный счётчик, при помощи свойства counter
, на элементе li
. Чтобы числовое значение счётчика начало увеличиваться, мы используем свойство counter
. Если мы хотим увеличивать счётчик не на единицу, а, например, на два, то прописываем это значение после имени счётчика.
Как пишется
Секция статьи "Как пишется"Чтобы добавить увеличение шага счётчика на элементе, в значении свойства нужно указать имя счётчика и числовое значение шага.
По умолчанию числовое значение равно 1, если не указано иное.
Счётчик example
на элементе li
будет увеличиваться на 1:
li { counter-increment: example;}
li { counter-increment: example; }
Можно указать ключевое слово none
, чтобы не изменять значение шага счётчика — это значение по умолчанию.
li { counter-increment: none;}
li { counter-increment: none; }
Аргументы
Секция статьи "Аргументы"Создавать новые счётчики может не только свойство counter
. Представим такую ситуацию, что вы применили на элемент только свойство counter
и указали в значении его свойства имя несуществующего счётчика (при этом на элементе нет унаследованного счётчика от: родительского элемента, одноуровневого предыдущего элемента).
li { counter-increment: new 2;}
li { counter-increment: new 2; }
В таком случае создастся новый счётчик на элементе li
с именем new
и начальным значением 0. После создания счётчика, свойство counter
начинает действовать как обычно.
Имена счётчиков чувствительны к регистру, например значения: example
и EXAMPLE
— это два разных, не связанных между собой счётчика.
Нельзя использовать ключевые слова: none
, initial
, inherit
, unset
, default
в качестве названий счётчиков.
В значении свойства можно указать 1 или более счётчиков. Указываются они по порядку через пробел.
li { counter-increment: count1 -1 count2 99;}
li { counter-increment: count1 -1 count2 99; }