W3docs
ru
Войти

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

Свойство CSS counter-reset создаёт и инициализирует один или несколько CSS-счётчиков. Примеры и объяснение на W3docs.

Свойство counter-reset создаёт один или несколько CSS-счётчиков и задаёт каждому из них начальное значение. Несмотря на название, основная задача свойства — инициализировать счётчик, чтобы его можно было использовать в дальнейшем: оно не просто обнуляет существующий счётчик, а создаёт его в текущей области видимости.

CSS-счётчики — это переменные, поддерживаемые браузером, значения которых могут увеличиваться CSS-правилами для отслеживания количества вхождений элементов. Они позволяют нумеровать разделы, главы, элементы списков или любые повторяющиеся элементы средствами CSS, без изменений разметки или JavaScript.

Счётчик полезен только в сочетании с тремя свойствами:

  • counter-reset — создаёт счётчик и задаёт ему начальное значение (эта страница).
  • counter-increment — увеличивает значение счётчика, как правило, один раз для каждого совпадающего элемента.
  • content — отображает значение счётчика через функцию counter() или counters(), обычно внутри псевдоэлемента ::before.

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

Принцип работы

Каждое объявление counter-reset принимает имя счётчика, которое вы придумываете сами (например, section), и необязательное целочисленное начальное значение:

/* "section" counter created, starts at 0 */
counter-reset: section;

/* "section" counter created, starts at 5 */
counter-reset: section 5;

/* multiple counters in one declaration */
counter-reset: chapter 0 page 1;

Если число не указано, счётчик начинается с 0. Затем первый совпадающий элемент выполняет counter-increment до того, как content его считывает, поэтому счётчик, начинающийся с 0 и увеличивающийся на 1, отображает 1 для первого элемента — что обычно и требуется.

Область видимости имеет значение. Счётчик, созданный с помощью counter-reset, ограничен элементом, в котором он объявлен, а также потомками этого элемента и следующими за ним соседними элементами. Именно это позволяет сбрасывать вложенный счётчик для каждого раздела: если указать counter-reset: subsection на каждом элементе h2, каждый раздел получит собственный счётчик subsection с нуля. На этом поведении основан пример с вложенной нумерацией ниже.

Начальное значениеnone
Применяется кВсем элементам.
НаследуетсяНет.
АнимируетсяНет.
ВерсияCSS2
Синтаксис DOMobject.style.counterReset = "section" ;

Синтаксис

counter-reset: none | name number | initial | inherit;

name — это идентификатор, который вы выбираете, а number — необязательное целое число (может быть отрицательным). В одном объявлении можно перечислить несколько пар name number, чтобы одновременно создать несколько счётчиков.

Пример: установка счётчика через JavaScript

counter-reset также доступно из DOM как element.style.counterReset. Нажмите «Try it», чтобы сбросить счётчик section до 5, и заголовки перенумеруются начиная с 6.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Click the "Try it" button to set the counter-reset property:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section 5";
      }
    </script>
  </body>
</html>
Попробуйте сами »

Пример с отрицательным приращением (обратный отсчёт)

Отрицательные числа допустимы как в качестве начальных значений, так и в counter-increment. Здесь счётчик создаётся со значением 0, а приращение равно -1, поэтому каждый заголовок отсчитывается вниз: -1, -2, -3, -4.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* create "my-counter", start at 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* decrease "my-counter" by 1 on each h2 */
        counter-increment: my-counter -1;
        content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>
Попробуйте сами »

Пример с нумерацией разделов и подразделов

Это наиболее распространённый практический вариант использования counter-reset: вложенная нумерация вида 1.1, 1.2, 2.1. Счётчик subsection сбрасывается на каждом элементе h2, поэтому нумерация подразделов в каждом разделе начинается с 1. Без такого сброса на каждом h2 подразделы продолжали бы нумероваться по всему документу.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* Set "section" to 0 */
        counter-reset: section;
      }
      h2 {
        /* Set "subsection" to 0 */
        counter-reset: subsection;
      }
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ": ";
      }
      h3::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h2>
    <h3>HTML Basics</h3>
    <h3>HTML Templates</h3>
    <h3>HTML References</h3>
    <h3>HTML Tags</h3>
    <h2>CSS</h2>
    <h3>CSS Basics</h3>
    <h3>CSS References</h3>
    <h3>CSS Advanced</h3>
    <h3>CSS Guides</h3>
    <h3>CSS Selectors</h3>
    <h3>CSS Properties</h3>
  </body>
</html>
Попробуйте сами »

Значения

ЗначениеОписание
noneСчётчики не увеличиваются.
name numbername задаёт имя счётчика для сброса. number задаёт значение, до которого счётчик сбрасывается при каждом вхождении элемента. По умолчанию равно 0, если не указано.
initialУстанавливает свойство в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Распространённые ошибки

  • Ничего не отображается само по себе. counter-reset только создаёт счётчик. Вам по-прежнему нужен counter-increment для его увеличения и content: counter(name) для отображения. Страница с одним лишь counter-reset не выведет никаких чисел.
  • counter-reset и counter-set. counter-reset создаёт счётчик в текущей области видимости; более новое counter-set только изменяет значение уже существующего счётчика и никогда не создаёт новую область. Используйте counter-reset, когда нужно перезапустить нумерацию внутри раздела.
  • Приращение выполняется до отображения. Поскольку приращение в ::before происходит до того, как считывается content, счётчик, начинающийся с 0 при шаге +1, показывает 1 для первого элемента. Задайте другое начальное значение, если вам нужен другой первый номер.
  • Счётчики не наследуются. Значение свойства не наследуется, однако сам счётчик виден потомкам и следующим соседним элементам через область видимости — именно это делает возможной вложенную нумерацию.

Поддержка браузерами

counter-reset является частью CSS2 и поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge и Opera.

Практика

Практика
Для чего используется свойство CSS 'counter-reset'?
Для чего используется свойство CSS 'counter-reset'?
Was this page helpful?