CSS-счётчики: как работает свойство counter-set

counter-set — это новое CSS-свойство, с помощью которого можно явно установить значение счётчика в нужный момент. Оно похоже на counter-reset, но отличается тем, что не сбрасывает счётчик, а просто присваивает ему конкретное значение. Это даёт больше контроля над нумерацией, особенно когда нужно продолжить счёт или задать его вручную в разных частях документа.

CSS-счётчики — это способ автоматически нумеровать элементы, например заголовки, пункты списка, шаги в инструкции. Их можно комбинировать с псевдоэлементами и свойством content, чтобы вставлять числа прямо в текст.

Пример: заголовки с нумерацией, начинающейся с 3

Допустим, вы хотите, чтобы некоторые подзаголовки начинались с номера 3, а не с 1. Это можно сделать с помощью counter-set:

h2 {
  counter-set: section 3;
}

h2::before {
  content: "Раздел " counter(section) ": ";
}

Теперь каждый <h2> будет начинаться с надписи Раздел 3:. Вы можете менять значение на любое другое, управляя нумерацией без изменения HTML.

А если нужно продолжить счёт?

Чтобы после counter-set продолжить нумерацию, можно добавить counter-increment. Например:

h2.special {
  counter-set: section 10;
}

h2 + h2 {
  counter-increment: section;
}

В этом случае один заголовок может установить номер 10, а следующий — уже автоматически станет 11. Это удобно, если нужно вручную задать начало счёта, но сохранить автоматическое увеличение дальше по странице.

Где использовать counter-set

• Для разделов и подпунктов в длинных документах
• Для управления нумерацией в адаптивных шаблонах
• В генерации отчётов, чеклистов, презентаций на чистом HTML+CSS

counter-set работает во всех современных браузерах и может стать отличной заменой ручной нумерации или необходимости использовать JavaScript для простых задач.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.