counter-reset

Одно из свойств для создания CSS-счётчика

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

Кратко

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

С помощью свойства counter-reset создаются новые счётчики на элементе.

Пример

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

Создаёт счётчик с именем example на элемент li с начальным значением 1:

        
          
          li {  counter-reset: example 1;}
          li {
  counter-reset: example 1;
}

        
        
          
        
      

Как понять

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

Счётчик автоматически добавляет числовое значение элементу. В основном используется для автоматической нумерации.

Каждый элемент имеет коллекцию из нуля или более счётчиков, которые наследуются через дерево документа подобно наследуемым значениям свойств.

Как пишется

Секция статьи "Как пишется"

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

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

Создаёт новый счётчик с именем chapter и начальным значением 0:

        
          
          li {  counter-reset: chapter;}
          li {
  counter-reset: chapter;
}

        
        
          
        
      

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

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

        
        
          
        
      

Аргументы

Секция статьи "Аргументы"

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

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

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

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