counter-reset
The counter-reset property is used to reset a CSS counter to a given value. It is part of the CSS counter module which is part of the generated content, automatic numbering, and lists CSS2.1 specification, extended in Generated and Replaced Content Module CSS3 specification.
- is the name of the counter you want to reset
- is the value to reset the counter to
- none disable the counter
Note: the default value for the integer is 0. If no integer is set after the counter name, it will be reseted to 0. Thus, this works as expected:
You can reset several counters at once with a space-separated list, each one with its specific value if you wish so.
This will reset my-awesome-counter to 5 and my-other-counter to the default value: 0.
You can see this list as: counter1 value1 counter2 value2 counter3 value3 . . If a value is omitted, it’s 0.
In the following demo, article resets section counter to its default value (0), which is then incremented at each section occurrence, then displayed in front of section headings.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Mobile / Tablet
Related
counter-increment
counter-reset
counter-set
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
Always learn a lot from CSS-Tricks.
With counter-reset and this useful nth-child tip, I was able to make double digit ordered lists. With something along these lines…
ol < counter-reset: li; >ol > li::before < content: counter(li); counter-increment: li; margin-right: 10px; line-height: 0; >ol > li:nth-child(-n+9)::before < /* 1 - 9 */ content: "0" counter(li); /* becomes 01 - 09 */ >01 one 02 two 03 three 04 four 05 five 06 six 07 seven 08 eight 09 nine 10 ten PS: Chris, you need to fix the padding on your ordered lists (gets cut off starting with double digits): one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirtheen
OK, the numbers are removed after the comment is posted. On my PS above, I meant typing ordered lists in Markdown on the comments. Cheers.
1. one 2. two . 10. ten 11. eleven Счётчики в CSS
Подробно разбираемся как браузер считает элементы и как этим управлять через CSS.
Время чтения: больше 15 мин
Обновлено 22 февраля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
CSS-счётчики — это мощный инструмент для нумерации любых элементов страницы, не только списков.
Создание счётчиков
Скопировать ссылку «Создание счётчиков» Скопировано
После наследования набора счётчиков от предыдущего одноуровневого и родительского элементов происходит создание счётчиков.
Создавать новые счётчики может не только свойство counter — reset .
Если вы применили свойство counter — increment или counter — set , или воспользовались функцией counter ( ) или counters ( ) и указали имя несуществующего счётчика:
li /* Сначала создаст счётчик с именем new, а затем увеличит его значение на 2 */ counter-increment: new 2;> li /* Сначала создаст счётчик с именем new, а затем установит его значение на 2 */ counter-set: new 2;> li::marker /* Сначала создаст счётчик с именем new, а затем подставит его значение */ content: counter(new);> li::marker /* Аналогично */ content: counters(new, '.');>li /* Сначала создаст счётчик с именем new, а затем увеличит его значение на 2 */ counter-increment: new 2; > li /* Сначала создаст счётчик с именем new, а затем установит его значение на 2 */ counter-set: new 2; > li::marker /* Сначала создаст счётчик с именем new, а затем подставит его значение */ content: counter(new); > li::marker /* Аналогично */ content: counters(new, '.'); >
В таком случае на элементе сначала создастся новый счётчик с именем new и начальным значением 0. После создания счётчика свойства counter — increment и counter — set , и функции counter ( ) и counters ( ) начнут действовать как обычно.
Если элемент уже содержит унаследованный счётчик с именем n , который был создан одноуровневым предыдущим элементом, и вы создаёте на элементе счётчик с точно таким же именем n , то этот счётчик заменит унаследованный.
Первый абзац
Второй абзац
Третий абзац
div> p class="first">Первый абзацp> p class="second">Второй абзацp> p class="third">Третий абзацp> div>
На элементе создаём счётчик c именем new и начальным значением 0:
div counter-reset: new 0;>div counter-reset: new 0; >
Теперь у элемента в наборе имеется один, созданный им же счётчик с именем new .
Создаём ещё один счётчик, но уже на элементе
. Назовём его paragraph :
p counter-reset: paragraph 1;>p counter-reset: paragraph 1; >
Первый дочерний элемент с классом first наследует свой начальный набор счётчиков от родительского элемента и также создаёт собственный счётчик с именем paragraph .
Теперь у элемента
с классом first в наборе два счётчика: один унаследованный от родительского элемента , второй собственно созданный счётчик.
Так как является предшествующим элементом в порядке дерева, элемент с классом first наследует также значение счётчика new — 0.
Следующий элемент
с классом second унаследует точно такой же набор счётчиков от предыдущего одноуровневого элемента
с классом first , но как только это произойдёт он перезапишет счётчик paragraph элемента
c классом first на собственно созданный счётчик.
Последний элемент
с классом third сделает абсолютно тоже самое.
Увеличим элементу с классом second значение счётчика paragraph :
.second counter-increment: paragraph 1;>.second counter-increment: paragraph 1; >
Подставим значение счётчика paragraph в псевдоэлемент : : before элементов с классами first , second и third чтобы пронумеровать их:
p::before content: counter(paragraph);>p::before content: counter(paragraph); >
Разница между counter ( ) и counters ( )
Скопировать ссылку «Разница между counter() и counters()» Скопировано
В итоговой демке выше нумерация (значение счётчиков) была выведена при помощи функции counters ( ) .
Функция counters ( ) выводит значения всех счётчиков с указанным именем в наборе:
Вторым аргументом функции counters ( ) важно указать разделитель в виде строки. Эта строка будет разделять значения всех счётчиков с указанным именем.
Функция counter ( ) выводит значение только последнего счётчика с указанным именем.
Выведем ту же самую демку, но используем функцию counter ( ) :
Как видно элемент
с классом display и псевдоэлемент : : before элемента с классом content не увеличили значение счётчика new .
Элементы с visibility : hidden не подчиняются этому правилу и увеличивают значение счётчика.
Неявный счётчик элементов списка
Скопировать ссылку «Неявный счётчик элементов списка» Скопировано
В дополнение к любым явно определённым в CSS счётчикам, любые элементы с display : list — item автоматически имеют в своём наборе специальный неявный счётчик с именем list — item .
Счётчиком list — item можно управлять так же как и обычным явным счётчиком.
Если в значении свойства counter — increment явно не указывается значение на которое счётчик list — item будет увеличиваться от элемента к элементу, то он автоматически увеличивается браузером на 1 для каждого элемента со свойством display : list — item .
Однако если вы укажете другое значение, например:
li counter-increment: list-item 2;>li counter-increment: list-item 2; >
автоматическое увеличение счётчика list — item будет переопределено и теперь его значение будет увеличиваться на 2.
Вы также можете указать значение 0, тогда счётчик list — item вообще перестанет увеличиваться.
li counter-increment: list-item 2;>li counter-increment: list-item 2; >
На самом деле это очень удобно, когда уже есть готовый неявный счётчик. Если вам нужно создать многоуровневый нумерованный список, это можно сделать в два счёта:
Выведем нумерацию при помощи функции counters ( ) :
li::marker content: counters(list-item, '.');>li::marker content: counters(list-item, '.'); >
Всё! Больше ничего делать не нужно.
Особенность списка
Скопировать ссылку «Особенность списка ol» Скопировано
Любые вносимые в HTML изменения нумерации списка также будут учитываться счётчиком.
- атрибут start и значение с которого следует начинать нумерацию, или атрибут reversed , чтобы пронумеровать список в обратном порядке, то данные атрибуты будут учитываться при нумерации списка. Также это касается элемента
и его атрибута value :
Выведем нумерацию при помощи функции counters ( ) :
li::marker content: counters(list-item, '.');>li::marker content: counters(list-item, '.'); >
Полная поддержка подобного поведения, пока что, реализована только в Mozilla Firefox.
На практике
Скопировать ссылку «На практике» Скопировано
Алексей Степанов советует
Скопировать ссылку «Алексей Степанов советует» Скопировано
🛠 Вы вдохновились выступлением Никиты Дубко и решили написать курсовую оформленную через CSS? Счётчики помогут вам сделать автоматическую нумерацию страниц, рисунков, вашего содержания и списка литературы, а также глав и подглав вашего научного труда.
Или у вас есть интересное дизайнерское решение вроде изображённого в начале статьи?
Также вы можете посмотреть две переведённые статьи на тему счётчиков:
counter — reset
С помощью свойства counter — reset создаются новые счётчики на элементе.
Пример
Скопировать ссылку «Пример» Скопировано
Создаём счётчик с именем example и начальным значением 1 на элементе :
li counter-reset: example 1;>li counter-reset: example 1; >
Как понять
Скопировать ссылку «Как понять» Скопировано
Перед тем как использовать значение счётчика в функциях counter ( ) и counters ( ) , этот счётчик нужно создать. Именно для этого существует свойство counter — reset .
Каждый элемент имеет коллекцию из нуля или более счётчиков, которые наследуются через дерево документа подобно наследуемым значениям свойств.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Чтобы создать новый счётчик на элементе, в значении свойства нужно указать имя счётчика и число, с которого начнётся отсчёт.
По умолчанию начальное значение равно 0, если не указано иное.
Здесь создаётся новый счётчик с именем chapter и начальным значением 0:
li counter-reset: chapter;>li counter-reset: chapter; >
Чтобы не создавать новый счётчик, можно указать ключевое слово none — это значение по умолчанию.
li counter-reset: none;>li counter-reset: none; >
Аргументы
Скопировать ссылку «Аргументы» Скопировано
Имена счётчиков чувствительны к регистру. Например, значения example и EXAMPLE — это два разных, не связанных между собой счётчика.
Нельзя использовать ключевые слова: none , initial , inherit , unset , default в качестве названий счётчиков.
В значении свойства можно указать 1 или более счётчиков. Указываются они по порядку через пробел.
li counter-reset: count1 -1 count2 99;>li counter-reset: count1 -1 count2 99; >