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>
с "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() | Возвращает текущее значение именованного счетчика |