Уласцівасць 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,
якое скідвае значэнне лічыльніка ў нуль