Својство counter-increment

Својство counter-increment поставља аутоматско нумерисање елемената, на пример, параграфа или наслова. Користи се заједно са својством counter-reset, псеудоелементима after и before, својством content, унутар којег се користи функција counter. За боље разумевање препоручујем да погледате примере.

Синтакса

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

Вредности

Вредност	Опис
назив	Назив бројача. Обична реч (као назив класе или id). Може се поставити више назива, раздвајајући их размаком. У том случају ће се истовремено мењати више бројача.
корак	Цео позитиван или негативан број. Необавезан параметар.
`none`	Забрањује увећање бројача за тренутни селектор.

Подразумевана вредност: none.

Пример

Направићемо да се параграфи аутоматски нумеришу:

<div id="parent">
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: counter(test);
}

Пример

Нека поред нумерације дода и неки текст. У нашем случају № пре цифре и тачка после:

<div id="parent">
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Пример

Почнимо нумерацију од 10-ти. За то почетном вредношћу бројача постављамо деветку, то јест за 1 мање него што нам треба:

<div id="parent">
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
</div>

#parent {
	counter-reset: test 9;
}
#parent p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Пример

Нека сада нумерација буде са кораком "2". За то као корак постављамо двојку:

<div id="parent">
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
</div>

#parent {
	counter-reset: test;
}
#parent p::before {
	counter-increment: test 2; /* постављамо двојку */
	content: "№" counter(test) ".";
}

Пример

У претходном примеру нумерација је почела са двојке, а ми смо хтели са јединице. Зашто се то десило? Зато што counter-reset ресетује вредност бројача на нулу, а затим counter-increment додаје свој корак: подразумевано јединицу, зато раније код нас нумерација почиње са 1. А сада додаје двојка - и нумерација почиње са двојке.

За исправљање проблема поставимо почетну вредност бројача на -1 и сада ће нумерација почети са 1 и биће увећавана за 2:

<div id="parent">
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
	<p>текст</p>
</div>

#parent {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Погледајте такође

својство counter-reset,
које ресетује вредност бројача на нулу