CSS Счётчики
Пицца
Гамбургер
Хотдоги
CSS счётчики - это "переменные", поддерживаемые CSS, значения которых можно увеличивать с помощью правил CSS (чтобы отслеживать, сколько раз они используются). Счетчики позволяют настраивать внешний вид контента в зависимости от его размещения в документе.
Автоматическая нумерация с помощью счётчиков
CSS счётчики похожи на "переменные". Значения переменных могут быть увеличены с помощью правил CSS (которые будут отслеживать, сколько раз они используются).
Для работы со счетчиками CSS мы будем использовать следующие свойства:
counter-reset- создает или сбрасывает счетчикcounter-increment- увеличивает значение счетчикаcontent- вставляет сгенерированный контентcounter()илиcounters()функция - добавляет значение счетчика к элементу
Чтобы использовать счетчик CSS, его необходимо сначала создать с помощью counter-reset.
В следующем примере создается счетчик для страницы (в селекторе body), затем увеличивается значение счетчика для каждого элемента <h2> и добавляется "Section <значение счётчика>:" в начало каждого элемента <h2>:
Пример
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Попробуйте сами »
Вложенные счётчики
В следующем примере создается один счетчик для страницы (section) и один счетчик для каждого элемента <h1> (subsection). Счётчик "section" будет подсчитываться для каждого элемента <h1> с помощью "Section <значения счётчика section>.", а счётчик "subsection" будет подсчитываться для каждого элемента <h2> с помощью "<значения счётчика section>.<значение счётчика subsection>":
Пример
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
}
Попробуйте сами »
Счетчик также может быть полезен для составления списков, поскольку в дочерних элементах автоматически создается новый экземпляр счетчика. Здесь мы используем функцию counters() для вставки строки между различными уровнями вложенных счетчиков:
Пример
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Попробуйте сами »
Свойства CSS счётчика
| Свойство | Описание |
|---|---|
| content | Используется с псевдоэлементами ::before и ::after для вставки сгенерированного контента |
| counter-increment | Увеличивает одно или несколько значений счетчика |
| counter-reset | Создает или сбрасывает один или несколько счетчиков |
