Все мы знаем про тег нумерованных списков OL. В этой статье я расскажу, как сделать нумерацию у любых блоков: без всякого JavaScript c помощью CSS можно подписать любые блоки цифрами от 1 до N. Наиболее часто это используется в заголовках, имеющих различные уровни, например 1, 1.1, 1.2 и т.д.
Первое, что нужно сделать, это придумать идентификатор для счетчика. Он может быть любым, например, назовем его blockNum. Затем, нужно установить счетчику начальное значение с помощью свойства CSS:
.blocks {
counter-reset: blockNum;
}
Таким образом, мы сбросили счетчик blockNum (установили его в ноль) для класса blocks, который объединяет наши нумерованные блоки.
Затем, для каждого элемента из серии блоков нужно установить инкремент счетчика. Допустим, что в качестве блоков мы используем теги LI, обрамленные OL. Тогда код CSS пополнится следующей записью:
.blocks li {
counter-increment: blockNum;
}
Теперь, после того, как счетчик настроен, надо вывести его значения. Это можно сделать с помощью псевдокласса:
.blocks li:after {
content: counter(blockNum);
}
Всё, счетчик настроен и будет выводиться. Можно убедиться в этом на работающем примере:
В этом же примере можно увидеть нумерованные заголовки разделов со вложенной нумерацией.
Привожу еще несколько примеров с расширенными параметрами при использовании указанных свойств:
// Установить начальное значение не ноль, а 5 counter-reset: blockNum 5; // Установить начальное значение нескольким счетчикам // (anotherCounter = 0) counter-reset: blockNum 5 anotherCounter; // Выводить счетчик не в виде арабских, а в виде римских цифр content: counter(blockNum, upper-roman);