counter-reset

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

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

Кратко

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

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

Пример

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

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

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

        
        
          
        
      

Как понять

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

Перед тем, как воспользоваться значением счётчика, через функции counter() или counters() этот счётчик нужно создать. Именно для этого существует свойство counter-reset.

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

Как пишется

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

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

По умолчанию начальное значение равно 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;
}