тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Свойство counter-increment

Свойство counter-increment задает автоматическую нумерацию элементов, например, абзацев или заголовков. Используется совместно со свойством counter-reset, псевдоэлементами after и before, свойством content, внутри которого используется функция counter. Для лучшего понимания рекомендую посмотреть примеры.

Синтаксис

селектор { counter-increment: название [шаг] | none; }

Значения

Значение Описание
название Название счетчика. Обычное слово (как название класса или id). Можно задавать несколько названий, разделяя их пробелом. В этом случае одновременно будут меняться несколько счетчиков.
шаг Целое положительное или отрицательное число. Необязательный параметр.
none Запрещает увеличение счетчика для текущего селектора.

Значение по умолчанию: none.

Пример

Сделаем так, чтобы абзацы нумеровались автоматически:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test; } #parent p::before { counter-increment: test; content: counter(test); }

:

Пример

Пусть кроме нумерации добавляется еще какой-нибудь текст. В нашем случае перед цифрой и точка после:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test; } #parent p::before { counter-increment: test; content: "№" counter(test) "."; }

:

Пример

Начнем нумерацию с 10-ти. Для этого начальным значением счетчика ставим девятку, то есть на 1 меньше, чем нам нужно:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test 9; } #parent p::before { counter-increment: test; content: "№" counter(test) "."; }

:

Пример

Пусть теперь нумерация будет с шагом "2". Для этого в качестве шага ставим двойку:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test; } #parent p::before { counter-increment: test 2; /* ставим двойку */ content: "№" counter(test) "."; }

:

Пример

В предыдущем примере нумерация началась с двойки, а мы хотели бы с единицы. Почему так произошло? Потому что counter-reset сбрасывает значения счетчика с ноль, а затем counter-increment добавляет свой шаг: по умолчанию единицу, поэтому раньше у нас нумерация начиналась с 1. А теперь прибавляется двойка - и нумерация начинается с двойки.

Для исправления проблемы поставим начальное значение счетчика в -1 counter-reset: test -1; - и теперь нумерация начнется с 1 и будет увеличиваться на 2:

<div id="parent"> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> </div> #parent { counter-reset: test -1; } p::before { counter-increment: test 2; content: "№" counter(test) "."; }

:

Смотрите также

  • свойство counter-reset,
    которое сбрасывает значение счетчика в ноль