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) ": ";
}
Счетчики вложения
В следующем примере создается один счетчик для страницы (раздела) и один счетчик для каждого элемента <h1> (подраздела). Счетчик «раздел» будет подсчитываться для каждого элемента <h1> с «Раздел < значение счетчика раздела >.», а счетчик «подраздел» будет подсчитываться для каждого элемента <h2> с «< значение счетчика раздела >.< значение счетчика подразделов >":
Пример
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
Property | Description |
---|---|
content | Used with the ::before and ::after pseudo-elements, to insert generated content |
counter-increment | Increments one or more counter values |
counter-reset | Creates or resets one or more counters |
counter() | Returns the current value of the named counter |