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) ": ";
}
Попробуйте сами »
Вложенные счетчики
В следующем примере создается один счетчик для страницы (Раздела) и один
счетчик для каждого элемента <h1> (Подраздела).
Счетчик "section" для каждого элемента <h1>
в "Раздел <значение счетчик разделов>.", и "content"
счетчик будет подсчитан за каждый элемент <h2>
с "<значение раздел счетчика > " . " <значение подраздел счетчика>":
Пример
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) " ";
}
Попробуйте сами »
Счетчик также может быть полезен для создания
экземпляра счетчика автоматически создается в дочерних элементов.
Здесь мы используем функцию 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 | Создает или сбрасывает один или несколько счетчиков |
| counter() | Возвращает текущее значение именованного счетчика |