counter-increment

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

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

Кратко

Секция статьи "Кратко"

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

Пример

Секция статьи "Пример"

Увеличивает значение счётчика example на элементе <li> на 2:

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