Свойство 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,
которое сбрасывает значение счетчика в ноль