Lastnost counter-increment

Lastnost counter-increment določa samodejno številčenje elementov, na primer, odstavkov ali naslovov. Uporablja se skupaj z lastnostjo counter-reset, psevdoelementoma after in before, lastnostjo content, znotraj katere se uporablja funkcija counter. Za boljše razumevanje priporočam, da si ogledate primere.

Sintaksa

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

Vrednosti

Vrednost	Opis
ime	Ime števca. Običajna beseda (kot ime razreda ali id). Lahko nastavite več imen, jih ločite s presledkom. V tem primeru se bodo hkrati spremenili več števcev.
korak	Celo pozitivno ali negativno število. Neobvezen parameter.
`none`	Prepove povečanje števca za trenutni selektor.

Privzeta vrednost: none.

Primer

Naredimo, da se odstavki samodejno oštevilčijo:

<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);
}

Primer

Naj poleg številčenja doda še kakšno besedilo. V našem primeru № pred številko in pika za:

<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) ".";
}

Primer

Začnimo številčenje z 10. Za to postavimo začetno vrednost števca na devet, to je za 1 manj, kot potrebujemo:

<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) ".";
}

Primer

Naj bo zdaj številčenje s korakom "2". Za to kot korak postavimo dvojko:

<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; /* postavimo dvojko */
	content: "№" counter(test) ".";
}

Primer

V prejšnjem primeru se je številčenje začelo z dvojko, mi pa bi radi z enico. Zakaj se je to zgodilo? Ker counter-reset ponastavi vrednosti števca na nič, nato pa counter-increment doda svoj korak: privzeto enico, zato se je pri nas prej številčenje začelo z 1. Zdaj pa se prišteva dvojka - in številčenje se začne z dvojko.

Za odpravljanje težave postavimo začetno vrednost števca na -1 in zdaj se bo številčenje začelo z 1 in povečevalo za 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) ".";
}

Glejte tudi

lastnost counter-reset,
ki ponastavi vrednost števca na nič