counter-reset

Свойство counter-reset принимает список из одного или нескольких разделенных пробелами имен счетчиков или ключевое слово none. Для имен счетчиков обычные счетчики используют формат <counter-name>, а обратные счетчики — reversed(<counter-name>), где <counter-name> — <custom-ident> или list-item для встроенного <ol> счетчика. Дополнительно, каждое имя счетчика может быть дополнено <integer>, чтобы установить его начальное значение.

<custom-ident>

Указывает имя счетчика для создания и инициализации с помощью формата <custom-ident>. Функциональная нотация reversed() может использоваться для обозначения обратного счетчика.

<integer>

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

none

Указывает, что никакой инициализации счетчика не должно происходить. Это значение полезно для переопределения counter-reset значений в менее специфичных правилах.

Свойство counter-reset может создавать как обычные, так и, в браузерах, которые это поддерживают, обратные счетчики. Вы можете создать несколько обычных и обратных счетчиков, разделенных пробелами. Счетчики могут быть самостоятельными именами или разделенными пробелами парами имя-значение.

Установка counter-increment: none на селектор с большей специфичностью переопределяет создание именованного счетчика, установленного на селекторах с меньшей специфичностью.

Значения по умолчанию для обычных и обратных счетчиков упрощают реализацию двух наиболее распространенных схем нумерации: последовательного счета от одного до числа элементов и обратного отсчета от числа элементов до одного соответственно. Включив значение счетчика для именованного счетчика, вы можете настроить счетчик на возрастание или убывание, начиная с целочисленного значения.

Обычные счетчики по умолчанию равны 0, если значение сброса не указано. По умолчанию обычные счетчики увеличиваются на единицу, что может быть изменено свойством counter-increment.

h1 {
  /* Create the counters "chapter" and "page" and set to initial default value.
     Create the counter "section" and set to "4". */
  counter-reset: chapter section 4 page;
}

При создании обратных счетчиков без значения, счетчик будет начинаться со значения, равного числу элементов в наборе, отсчитывая вниз, так что последний элемент в наборе будет 1. По умолчанию обратные счетчики уменьшаются на единицу; это также может быть изменено с помощью свойства counter-increment.

h1 {
  /* Create reversed counters "chapter" and "section".
      Set "chapter" as the number of elements and "section" as "10".
      Create the counter "pages" with the initial default value. */
  counter-reset: reversed(chapter) reversed(section) 10 pages;
}

Нумерованные списки (<ol>) поставляются со встроенными list-item счетчиками, которые управляют их нумерацией. Эти счетчики автоматически увеличиваются или уменьшаются на единицу с каждым элементом списка. Свойство counter-reset может использоваться для сброса list-item счетчиков. Как и в случае с другими счетчиками, вы можете переопределить значение по умолчанию для list-item счетчиков, используя свойство counter-increment.

counter-reset = 
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |
  none                                                

<reversed-counter-name> = 
  reversed( <counter-name> )  

В этом примере свойство counter-reset используется для установки начального значения неявного list-item счетчика.

HTML

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ol>

CSS

Используя counter-reset, мы устанавливаем неявный list-item счетчик на старт с другого значения, чем значение по умолчанию 1.

ol {
  counter-reset: list-item 3;
}

Результат

Используя counter-reset, мы устанавливаем неявный list-item счетчик для начала счета с 3 для каждого ol. Затем, первый элемент будет иметь номер 4, второй — 5 и так далее, аналогично эффекту использования атрибута <ol start="4"> в HTML.

В следующем примере объявлен обратный счетчик с именем «priority». Счетчик используется для нумерации пяти задач.

<ul class="stack">
  <li>Task A</li>
  <li>Task B</li>
  <li>Task C</li>
  <li>Task D</li>
  <li>Task E</li>
</ul>

li::before {
  content: counter(priority) ". ";
  counter-increment: priority -1;
}

.stack {
  counter-reset: reversed(priority);
  list-style: none;
}

В выводе элементы пронумерованы в обратном порядке от 5 до 1. Обратите внимание, что в коде не указано начальное значение счетчика. Браузер автоматически вычисляет начальное значение во время макета, используя значение приращения счетчика.

• Руководство по использованию CSS счётчиков
• counter-increment свойство
• counter-set свойство
• @counter-style правило
• counter() и counters() функции
• content свойство
• ::marker псевдокласс
• Модуль CSS списков и счётчиков
• Модуль CSS стилей счётчиков