CSS счётчики

CSS счётчики, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счётчики реализованы в CSS 2.1 (ссылка на спецификацию).

Значение счётчика сбрасывается (инициализируется) при помощи counter-reset (en-US).

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

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

Для того, чтобы использовать CSS счётчики, сначала необходимо сбросить их значение (0 по умолчанию). Для того, чтобы отобразить значение счётчика - используйте функцию counter(). Следующий пример прибавляет в начале каждого h3 элемента "Section <значение счётчика>:".

body {
  counter-reset: section;                     /* Устанавливает значение
                                                 счётчика, равным 0 */
}

h3::before {
  counter-increment: section;                 /* Инкрементирует счётчик*/
  content: "Секция " counter(section) ": ";   /* Отображает текущее
                                                 значение счётчика */
}

Пример:

<h3>Вступление</h3>
<h3>Основная часть</h3>
<h3>Заключение</h3>

Вложенные счётчики

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

ol {
  counter-reset: section;           /*Создаёт новый счётчик для каждого
                                      тега <ol>*/
  list-style-type: none;
}

li::before {
  counter-increment: section;      /*Инкрементируется только счётчик
                                     текущего уровня вложенности*/
  content: counters(section,".") " ";/*Добавляем значения всех уровней
                                    вложенности, используя разделитель '.'*/
                                   /*Если необходима поддержка < IE8,
                                      необходимо убедиться, что после
                                      разделителя ('.') не стоит пробел*/
}

Объединим с данным 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>

Результат:

Спецификации

Specification Status Comment
CSS Lists Module Level 3
Определение 'CSS Counters' в этой спецификации.		 Рабочий черновик No change
CSS Level 2 (Revision 1)
Определение 'CSS Counters' в этой спецификации.		 Рекомендация Initial definition

Смотрите также