Использование счётчиков CSS

Для использования счётчика он должен быть сначала инициализирован с помощью свойства counter-reset. Значение счётчика можно увеличить или уменьшить с помощью свойства counter-increment и напрямую установить в определённое значение с помощью свойства counter-set. Текущее значение счётчика отображается с помощью функции counter() или counters(), обычно в свойстве псевдоэлемента content.

Счётчики могут быть установлены, сброшены или инкрементированы только в элементах, которые генерируют блоки. Например, если элемент установлен в display: none, то любые операции со счётчиком на этом элементе будут проигнорированы.

Свойства счётчиков могут быть ограничены для определённых элементов с помощью изоляции стилей, что подробно описано в свойстве contain.

Для использования CSS-счётчика он должен быть сначала инициализирован с помощью свойства counter-reset. Свойство также можно использовать для изменения значения счётчика на любое число.

Ниже мы инициализируем счётчик с именем section до значения по умолчанию (0).

counter-reset: section;

Вы также можете инициализировать несколько счётчиков, необязательно указывая начальное значение для каждого. Ниже мы инициализируем счётчики section и topic до значения по умолчанию, а счётчик page до 3.

counter-reset: section page 3 topic;

После инициализации значение счётчика можно увеличить или уменьшить с помощью counter-increment. Например, следующее объявление увеличит счётчик section на единицу при каждом теге h3.

h3::before {
  counter-increment: section; /* Increment the value of section counter by 1 */
}

Вы можете указать значение приращения или убывания после имени счётчика. Это может быть положительное или отрицательное число, но по умолчанию равно 1, если целое число не указано.

Помимо увеличения или уменьшения, счётчики также могут быть явно установлены в значение с помощью свойства counter-set.

.done::before {
  counter-set: section 20;
}

Имя счётчика не должно быть none, inherit, или initial; в противном случае объявление будет проигнорировано.

Значение счётчика можно отобразить, используя функцию counter() или counters() в свойстве content.

Например, следующее объявление использует counter() для добавления текста Section <number>: перед каждым заголовком h3, где <number> — значение счётчика в десятичной форме (по умолчанию):

h3::before {
  counter-increment: section; /* Increment the value of section counter by 1 */
  content: "Section " counter(section) ": "; /* Display counter value in default style (decimal) */
}

Функция counter() используется, когда нумерация уровней вложенности не включает контекст родительских уровней. Например, в каждом вложенном уровне счётчик начинается с единицы:

1 One
  1 Nested one
  2 Nested two
2 Two
  1 Nested one
  2 Nested two
  3 Nested three
3 Three

Функция counters() используется, когда счётчик вложенных уровней должен включать счётчик родительских уровней. Например, вы можете использовать это для вывода разделов, как показано:

1 One
  1.1 Nested one
  1.2 Nested two
2 Two
  2.1 Nested one
  2.2 Nested two
  2.3 Nested three
3 Three

Функция counter() имеет две формы: counter(<counter-name>) и counter(<counter-name>, <counter-style>). Сгенерированный текст — значение самого внутреннего счётчика заданного имени в области действия у псевдоэлемента.

Функция counters() также имеет две формы: counters(<counter-name>, <separator>) и counters(<counter-name>, <separator>, <counter-style>). Сгенерированный текст — значения всех счётчиков с данным именем в области действия данного псевдоэлемента, от внешнего к внутреннему, разделённые указанной строкой (<separator>).

Счётчик отображается в указанном <counter-style> для обоих методов (decimal по умолчанию). Вы можете использовать любые значения list-style-type или свои собственные настраиваемые стили.

Примеры использования counter() и counters() приведены ниже в основном примере и примере вложенного счётчика соответственно.

Обратный счётчик — это счётчик, предназначенный для подсчёта вниз (уменьшения), а не вверх (увеличения). Обратные счётчики создаются с помощью обозначения функции reversed() при именовании счётчика в свойстве counter-reset.

Обратные счётчики имеют значение по умолчанию, равное числу элементов (в отличие от обычных счётчиков, которые имеют значение по умолчанию 0). Это упрощает реализацию счётчика, который считает от числа элементов до единицы.

Например, чтобы создать обратный счётчик с именем section со значением по умолчанию, используйте следующий синтаксис:

counter-reset: reversed(section);

Конечно, вы можете указать любое начальное значение.

Значение счётчика уменьшается путём указания отрицательного значения для свойства counter-increment.

Каждый элемент или псевдоэлемент имеет набор счётчиков в области действия этого элемента. Начальные счётчики в наборе получаются от родительского элемента и предыдущего элемента-потомка. Значения счётчиков получаются от последнего потомка предыдущего элемента-потомка, последнего элемента-потомка или родителя.

Когда элемент объявляет счётчик, счётчик вкладывается во счётчик с тем же именем, полученный от родителя. Если родитель не имеет счётчика с тем же именем, то счётчик добавляется в набор счётчиков элемента, как есть. Счётчик с тем же именем, полученный от предыдущего элемента-потомка, удаляется из набора счётчиков.

Функция counter() извлекает самый внутренний счётчик с заданным именем. А функция counters() извлекает всё дерево счётчиков с заданным именем.

В следующем примере мы демонстрируем наследуемый счётчик с именем primary и счётчик предыдущего элемента-потомка с именем secondary. Все элементы <div> отображают свои счётчики с помощью функции counters(). Обратите внимание, что все счётчики были созданы с помощью свойства counter-reset, и ни один из счётчиков не был инкрементирован.

<section>
  counter-reset: primary 3
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div class="same-primary-name">D</div>
  <span> counter-reset: primary 6</span>
  <div>E</div>
  <div class="new-secondary-name">F</div>
  <span> counter-reset: secondary 5</span>
  <div>G</div>
  <div>H</div>
  <div class="same-secondary-name">I&nbsp;</div>
  <span> counter-reset: secondary 10</span>
  <div>J&nbsp;</div>
  <div>K</div>
  <section></section>
</section>

/* create 'primary' counter on divs' parent */
section {
  counter-reset: primary 3;
}

div::after {
  content: " ('primary' counters: " counters(primary, "-", style)
    ", 'secondary' counters: " counters(secondary, "-", style) ")";
  color: blue;
}

/* create new 'primary' counter */
.same-primary-name {
  counter-reset: primary 6;
}

/* create 'secondary' counter on div 'F' */
.new-secondary-name {
  counter-reset: secondary 5;
}

/* override the sibling 'secondary' counter */
.same-secondary-name {
  counter-reset: secondary 10;
}

Элемент section инициализирует счётчик с именем primary со значением 3, и все дочерние элементы <div> получают унаследованный счётчик primary. Элемент 'D' создаёт новый счётчик primary (значение 6), который вкладывается в счётчик, полученный от родителя, поэтому элемент имеет два счётчика с именем primary со значениями 3 и 6.

Элемент 'F' создаёт счётчик secondary (значение 5) впервые и передает его следующему элементу-потомку 'G'. Элемент 'G' передает счётчик следующему элементу 'H' и так далее. Затем элемент 'I' создаёт новый счётчик с тем же именем secondary (значение 10), но опускает счётчик secondary (значение 5) от предыдущего элемента-потомка 'H' и передает свой счётчик элементу 'J'.

Свойство counter-set обновляет существующий счётчик, а если счётчика с данным именем нет, то создаёт новый. Свойство counter-reset всегда создаёт новый счётчик.

В следующем примере есть два подсписка внутри родительского списка. Каждый элемент списка пронумерован с помощью счётчика с именем 'item'. Первый подсписок использует свойство counter-set, а второй подсписок использует свойство counter-reset для изменения счётчика 'item'.

<ul class="parent">
  <li>A</li>
  <li>B</li>
  <li>
    C (the counter updated using `counter-set`)
    <ul class="sub-list-one">
      <li>sub-A</li>
      <li>sub-B</li>
    </ul>
  </li>
  <li>D</li>
  <li>
    E (a new counter created using `counter-reset`)
    <ul class="sub-list-two">
      <li>sub-A</li>
      <li>sub-B</li>
      <li>sub-C</li>
    </ul>
  </li>
  <li>F</li>
  <li>G</li>
</ul>

/* create a new counter for the first time */
.parent {
  counter-reset: item 0;
}

/* increment the counter on each list item */
li {
  counter-increment: item;
}

/* show numbers on list items */
li::before {
  content: counter(item) " ";
}

/* change the existing counter value */
.sub-list-one {
  counter-set: item 10;
}

/* change the counter value */
.sub-list-two {
  counter-reset: item 0;
}

Обратите внимание, как элементы первого подсписка начинают получать номера с 11, а нумерация продолжается в родительском списке. Это происходит потому, что свойство counter-set обновляет тот же счётчик 'item', объявленный в элементе .parent. Затем обратите внимание, как элементы второго подсписка получают новую нумерацию, начинающуюся с '1', и элементы родительского списка после него не продолжают нумерацию. Это потому, что свойство counter-reset создало новый счётчик с тем же именем, поэтому элементы родительского списка продолжали использовать старый счётчик.

У упорядоченных списков, созданных с помощью элементов <ol>, неявно есть счётчик с именем list-item.

Как и другие счётчики, он имеет значение по умолчанию 0 для счётчиков, увеличивающихся вверх, и "количество элементов" для обратных счётчиков. В отличие от счётчиков, созданных автором, list-item автоматически увеличивается или уменьшается на единицу для каждого элемента списка в зависимости от того, является ли счётчик обратным.

Счётчик list-item может использоваться для изменения поведения упорядоченных списков с помощью CSS. Например, вы можете изменить начальное значение по умолчанию или использовать counter-increment для изменения способа увеличения или уменьшения элементов списка.

В этом примере к началу каждой заголовка добавляется "Раздел [значение счётчика]:".

CSS

body {
  counter-reset: section; /* Set a counter named 'section', and its initial value is 0. */
}

h3::before {
  counter-increment: section; /* Increment the value of section counter by 1 */
  content: "Section " counter(section) ": "; /* Display the word 'Section ', the value of
                                                section counter, and a colon before the content
                                                of each h3 */
}

HTML

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

Результат

Этот пример аналогичен предыдущему, но использует обратный счётчик. Если ваш браузер поддерживает обозначение функции reversed(), результат будет таким:

CSS

body {
  counter-reset: reversed(
    section
  ); /* Set a counter named 'section', and its initial value is 0. */
}

h3::before {
  counter-increment: section -1; /* Decrement the value of section counter by 1 */
  content: "Section " counter(section) ": "; /* Display the word 'Section ', the value of
                                                section counter, and a colon before the content
                                                of each h3 */
}

HTML

<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>

Результат

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

CSS

:root {
  counter-reset: link;
}

a[href] {
  counter-increment: link;
}

a[href]:empty::after {
  content: "[" counter(link) "]";
}

HTML

<p>See <a href="https://www.mozilla.org/"></a></p>
<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
<p>See also <a href="https://developer.mozilla.org/"></a></p>

Результат

Счётчик CSS может быть особенно полезен для создания маркированных списков, потому что новый экземпляр счётчика автоматически создаётся во вложенных элементах. Используя функцию counters(), можно вставлять разделительный текст между различными уровнями вложенных счётчиков.

CSS

ol {
  counter-reset: section; /* Creates a new instance of the
                             section counter with each ol
                             element */
  list-style-type: none;
}

li::before {
  counter-increment: section; /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " "; /* Combines the values of all instances
                                          of the section counter, separated
                                          by a period */
}

HTML

<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

Результат

• contain
• counter-reset
• counter-set
• counter-increment
• @counter-style
• Модуль стилей счётчиков CSS
• Модуль CSS списков и счётчиков