Својството 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 и сега нумерирањета ќе започне со 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,
кое ја ресетира вредноста на бројачот на нула