CSS счетчики

Пицца

Гамбургер

Хотдог


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

Автоматическая нумерация при помощи счетчиков

CSS счетчики похожи на переменные. Значения этих "переменных" увеличиваются правилами CSS, который будет отслеживать, сколько раз они используются.

Чтобы работать с CSS счетчиками, используются следующие свойства и функции:

  • counter-reset - Создает или сбрасывает счетчик
  • counter-increment - Увеличивает значение счетчика
  • content - Вставляет сгенерированный контент
  • counter() или counters() - Добавляет значение счетчика к элементу

Чтобы использовать CSS счетчик, сначала его нужно создать при помощи свойства counter-reset.

В следующем примере создается счетчик для веб-страницы (в селекторе body), затем этот счетчик увеличивается на каждом элементе <h2>, при этом в начале каждого элемента <h2> добавляется строка "Раздел <значение счетчика>:":


body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Раздел " counter(section) ": ";
}

Результат:

Учебник HTML

Учебник CSS

Учебник JavaScript

Учебник Python

Учебник SQL


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

В следующем примере создается один счетчик для страницы (section) и один счетчик для каждого элемента <h1> (subsection). Счетчик "section" считает элементы <h1> и выводит строку "Раздел <значение счетчика section>:", а счетчик "subsection" считает вложенные элементы <h2> и выводит строку "<значение счетчика section>.<значение счетчика subsection>":


body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Раздел " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Результат:

Учебники HTML/CSS

HTML

CSS

Bootstrap

Учебники по скриптам

JavaScript

jQuery

React


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


ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Результат:

  1. элемент
  2. элемент
    1. элемент
    2. элемент
    3. элемент
      1. элемент
      2. элемент
      3. элемент
    4. элемент
  3. элемент
  4. элемент

CSS свойства управления счетчиками

Свойство Описание
content Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует
counter-increment Увеличивает значение счетчика приращений
counter-reset Определяет идентификатор, в котором будет храниться счётчик приращений