Svojstvo counter-increment

Svojstvo counter-increment postavlja automatsko numerisanje elemenata, na primer, paragrafa ili naslova. Koristi se zajedno sa svojstvom counter-reset, pseudoelementima after i before, svojstvom content, unutar kog se koristi funkcija counter. Za bolje razumevanje preporučujem da pogledate primere.

Sintaksa

selektor {
	counter-increment: naziv [korak] | none;
}

Vrednosti

Vrednost	Opis
naziv	Naziv brojača. Obična reč (kao naziv klase ili id). Može se postaviti više naziva, razdvajajući ih razmakom. U tom slučaju će se istovremeno menjati više brojača.
korak	Ceo pozitivan ili negativan broj. Neobavezni parametar.
`none`	Zabranjuje povećanje brojača za trenutni selektor.

Podrazumevana vrednost: none.

Primer

Uradimo da se paragrafi automatski numerišu:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

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

Primer

Neka pored numeracije bude dodat i neki tekst. U našem slučaju № ispred cifre i tačka posle:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

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

Primer

Počnimo numeraciju sa 10-ti. Za ovo početnu vrednost brojača postavljamo na devetku, odnosno za 1 manje nego što nam treba:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

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

Primer

Neka sada numeracija bude sa korakom "2". Za ovo kao korak stavljamo dvojku:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

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

Primer

U prethodnom primeru numeracija je počela sa dvojke, a mi bismo hteli sa jedinice. Zašto se to desilo? Zato što counter-reset resetuje vrednost brojača na nulu, a zatim counter-increment dodaje svoj korak: podrazumevano jedinicu, zato je ranije kod nas numeracija počinjala od 1. A sada se dodaje dvojka - i numeracija počinje od dvojke.

Za ispravljanje problema postavimo početnu vrednost brojača na -1 i sada će numeracija početi od 1 i biće uvećavana za 2:

<div id="parent">
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
	<p>tekst</p>
</div>

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

Pogledajte takođe

svojstvo counter-reset,
koje resetuje vrednost brojača na nulu