CSS счётчики

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

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

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

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

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

css

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

Пример:

html

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

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

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

css

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

Объединим с данным HTML:

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>

Результат: