counter-reset

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

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

Кратко

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

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

Пример

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

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

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