`counter-increment`

Свойство, которое управляет шагом числового значения существующих CSS-счётчиков

Время чтения: меньше 5 мин

Кратко

С помощью свойства counter-increment можно указать число (шаг), на которое будет увеличиваться нумерация CSS-счётчика.

Пример

Устанавливает шаг в 2 для счётчика example на элементе li:

        
          
          li {  counter-increment: example 2;}
          li {
  counter-increment: example 2;
}

Как понять

Например, есть какой-то установленный счётчик, при помощи свойства counter-reset, на элементе li. Чтобы числовое значение счётчика начало увеличиваться, мы используем свойство counter-increment. Если мы хотим увеличивать счётчик не на единицу, а, например, на два, то прописываем это значение после имени счётчика.

Как пишется

Чтобы добавить увеличение шага счётчика на элементе, в значении свойства нужно указать имя счётчика и числовое значение шага.

По умолчанию числовое значение равно 1, если не указано иное.

Счётчик example на элементе li будет увеличиваться на 1:

        
          
          li {  counter-increment: example;}
          li {
  counter-increment: example;
}

Можно указать ключевое слово none, чтобы не изменять значение шага счётчика — это значение по умолчанию.

        
          
          li {  counter-increment: none;}
          li {
  counter-increment: none;
}

Аргументы

Создавать новые счётчики может не только свойство counter-reset. Представим такую ситуацию, что вы применили на элемент только свойство counter-increment и указали в значении его свойства имя несуществующего счётчика (при этом на элементе нет унаследованного счётчика от: родительского элемента, одноуровневого предыдущего элемента).

        
          
          li {  counter-increment: new 2;}
          li {
  counter-increment: new 2;
}

В таком случае создастся новый счётчик на элементе li с именем new и начальным значением 0. После создания счётчика, свойство counter-increment начинает действовать как обычно.

Имена счётчиков чувствительны к регистру, например значения: example и EXAMPLE — это два разных, не связанных между собой счётчика.

Нельзя использовать ключевые слова: none, initial, inherit, unset, default в качестве названий счётчиков.

В значении свойства можно указать 1 или более счётчиков. Указываются они по порядку через пробел.

        
          
          li {  counter-increment: count1 -1 count2 99;}
          li {
  counter-increment: count1 -1 count2 99;
}