counter-increment

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

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

Кратко

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

С помощью свойства 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;
}