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;
}