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) ": ";
}

Результат:

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

В следующем примере создается один счетчик для страницы (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) " ";
}

Результат:

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

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

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

Результат:

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