CSS-свойство `counter-reset`

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

Попробуйте

counter-reset: none;

counter-reset: chapter-count 0;

counter-reset: chapter-count;

counter-reset: chapter-count 5;

counter-reset: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-reset: chapter-count;
}

#example-element {
  background-color: lightblue;
  color: black;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counters(chapter-count, ".") ": ";
}

Синтаксис

/* Create a counter with initial default value 0 */
counter-reset: my-counter;

/* Create a counter and initialize as "-3" */
counter-reset: my-counter -3;

/* Create a reversed counter with initial default value */
counter-reset: reversed(my-counter);

/* Create a reversed counter and initialize as "-1" */
counter-reset: reversed(my-counter) -1;

/* Create reversed and regular counters at the same time */
counter-reset: reversed(pages) 10 items 1 reversed(sections) 4;

/* Remove all counter-reset declarations in less specific rules */
counter-reset: none;

/* Global values */
counter-reset: inherit;
counter-reset: initial;
counter-reset: revert;
counter-reset: revert-layer;
counter-reset: unset;

Значения

Свойство 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;
}

Встроенный счетчик list-item

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

Формальное определение

Формальный синтаксис

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

<counter-name> = 
  <custom-ident>

<integer> = 
  <number-token>

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

Примеры

Переопределение счетчика list-item

В этом примере свойство 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>

@supports not (counter-reset: reversed(priority)) {
  body::before {
    content: "Your browser doesn't support the reversed() function.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

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