<Счетчик> CSS

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

Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1.

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

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

**Счетчики**, в своей сущности, переменные CSS, значения которых могут быть инкрементированы при помощи CSS для отслеживания количества их использования. Они позволяют регулировать внешний вид контента, основываясь на его местоположении в документе. CSS счетчики реализованы в CSS 2.1. Значение счетчика сбрасывается (инициализируется) при помощи [`counter-reset`](/css/counter-reset/). [`counter-increment`](/css/counter-increment/) может быть отображен на странице, используя функцию [`counter()`](/css/function-counter/) или [`counters()`](/css/function-counters/) в свойстве [`content`](/css/content/).
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Lists and Counters Module Level 3](https://drafts.csswg.org/css-lists-3/#auto-numbering) * [CSS Level 2 (Revision 1)](http://www.w3.org/TR/CSS2/generate.html#counters)

Примеры

Для того, чтобы использовать 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>

Примеры

Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (`0` по умолчанию). Для того, чтобы отобразить значение счетчика используйте функцию `counter()`. Следующий пример прибавляет в начале каждого [`h3`](/html/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>

Содержание

  • Синтаксис
    • Значения
      • Примеры
        • Вложенные счетчики
        • Для того, чтобы использовать CSS счетчики, сначала необходимо сбросить их значение (`0` по умолчанию). Для того, чтобы отобразить значение счетчика используйте функцию `counter()`. Следующий пример прибавляет в начале каждого [`h3`](/html/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>

      В начало