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