counter-increment

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

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

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Например, на элементе <li> есть какой-то счётчик, установленный при помощи свойства counter-reset. Чтобы числовое значение счётчика начало увеличиваться, мы используем свойство 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;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать