Создание нумерованных списков с помощью CSS-свойства counter

CSS-свойство counter — это мощный инструмент, позволяющий создавать нумерацию для элементов на веб-странице. Хотя на первый взгляд это может показаться похожим на использование HTML-тега <ol>, counter открывает новые возможности, например, автоматическую нумерацию заголовков или создание оглавлений для объем

Содержание

Основы использованияcounter
Шаг 1: Создание и инициализация счетчика
Шаг 2: Увеличение значения счетчика
Шаг 3: Визуализация значения счетчика
Пример использования
Дополнительные возможностиcounter
Изменение шага инкремента
Использование нескольких счетчиков
Вложенные счетчики
Когда использоватьcounter, а когда<ol>
Поддержка браузеров
Источники информации

Основы использования `counter`

Для того чтобы начать работать с counter, необходимо выполнить три простых шага:

Создать и инициализировать счетчик: Прежде всего, нужно создать счетчик и задать ему начальное зна
Увеличить значение счетчика: Далее следует настроить инкремент счетчика, который определяет, как будет увеличиваться его значение.
Визуализировать значение счетчика: На последнем шаге нужно вывести значение счетчика на экран, используя CSS-свойство content.

Шаг 1: Создание и инициализация счетчика

Сначала создается счетчик и присваивается ему имя:

div {
counter-reset: my-counter; /* создаем и инициализируем счетчик */
}

Имя счетчика (my-counter) необходимо для его дальнейшего использования. По умолчанию значение счетчика равно 0, но его можно задать явно.

Шаг 2: Увеличение значения счетчика

Следующим шагом является инкремент значения счетчика, что позволяет изменять его значение с каждым вызовом. Например, для заголовков можно использовать следующий код:

h2::before {
counter-increment: my-counter; /* увеличиваем значение счетчика */
content: counter(my-counter) ": "; /* визуализируем счетчик */
}

Шаг 3: Визуализация значения счетчика

Чтобы вывести значение счетчика на экран, используется свойство content с функцией counter:

content: counter(my-counter) ": ";

Таким образом, каждое последующее появление элемента h2 будет автоматически пронумеровано.

Пример использования

Рассмотрим пример, в котором счетчик используется для нумерации заголовков внутри блока:

<div>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
</div>

CSS для этого примера может выглядеть так:

div {
counter-reset: my-counter; /* Инициализация счетчика */
}

h2::before {
counter-increment: my-counter; /* Увеличение значения счетчика */
content: counter(my-counter) ": "; /* Визуализация значения */
}

Результат:

HTML
CSS
JavaScript

Дополнительные возможности `counter`

Изменение шага инкремента

Свойство counter-increment позволяет задавать шаг инкремента. Например, можно увеличить счетчик на 5 единиц или уменьшать его на 1:

h2::before {
counter-increment: my-counter 5;
content: counter(my-counter) ": ";
}

Использование нескольких счетчиков

На одной странице можно использовать несколько счетчиков, присваивая каждому уникальное имя:

div {
counter-reset: counter-one counter-two 100; /* создаем два счетчика */
}

h2::before {
counter-increment: counter-one;
content: counter(counter-one) ": ";
}

h3::before {
counter-increment: counter-two;
content: counter(counter-two) ": ";
}

Вложенные счетчики

Вложенные списки можно создавать с помощью функции counters, которая позволяет указывать разделитель между уровнями:

div {
counter-reset: multi-counters;
}

h2::before {
counter-increment: multi-counters;
content: counters(multi-counters,".") ": ";
}

Когда использовать `counter`, а когда `<ol>`

HTML-тег <ol> следует использовать, если требуется семантически корректный нумерованный список.
CSS-свойство counter подходит для создания нумерации заголовков, оглавлений и других нестандартных случаев.

Поддержка браузеров

Свойство counter поддерживается большинством современных браузеров, включая Internet Explorer 8 и выше. Более подробную информацию можно найти на caniuse.com.

Источники информации

MDN: счетчики
Приемы CSS: увеличение счетчика
W3Schools: сброс счетчика CSS

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