Vlastnosť counter-increment

Vlastnosť counter-increment nastavuje automatické číslovanie prvkov, napríklad odsekov alebo nadpisov. Používa sa spoločne s vlastnosťou counter-reset, pseudoelementmi after a before, vlastnosťou content, v ktorom sa používa funkcia counter. Pre lepšie pochopenie odporúčam pozrieť si príklady.

Syntax

selektor {
	counter-increment: názov [krok] | none;
}

Hodnoty

Hodnota	Popis
názov	Názov počítadla. Bežné slovo (ako názov triedy alebo id). Môžete zadať viac názvov, oddelených medzerou. V tomto prípade sa súčasne zmení viacero počítadiel.
krok	Celé kladné alebo záporné číslo. Voliteľný parameter.
`none`	Zakáže zvýšenie počítadla pre aktuálny selektor.

Predvolená hodnota: none.

Príklad

Nastavme automatické číslovanie odsekov:

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

Príklad

Nech okrem číslovania sa pridá aj nejaký text. V našom prípade № pred číslom a bodka 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) ".";
}

Príklad

Začnime číslovanie od 10. Na to nastavíme počiatočnú hodnotu počítadla na deväť, teda o 1 menej, ako potrebujeme:

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

Príklad

Nech je teraz číslovanie s krokom "2". Na to ako krok nastavíme dvojku:

<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; /* nastavíme dvojku */
	content: "№" counter(test) ".";
}

Príklad

V predchádzajúcom príklade číslovanie začalo dvojkou, ale my by sme chceli od jednotky. Prečo sa to stalo? Pretože counter-reset resetuje hodnotu počítadla na nulu a potom counter-increment pridá svoj krok: predvolene jednotku, preto predtým u nás číslovanie začínalo od 1. A teraz pripočítava sa dvojka - a číslovanie začína dvojkou.

Pre opravu problému nastavme počiatočnú hodnotu počítadla na -1 a teraz číslovanie začne od 1 a bude sa zvyšovať o 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) ".";
}

Pozri tiež

vlastnosť counter-reset,
ktorá resetuje hodnotu počítadla na nulu