Пицца
Гамбургер
Хотдог
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> с "Section <значение счетчика раздела>.", и "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() | Возвращает текущее значение именованного счетчика |