Vlastnost counter-increment

Vlastnost counter-increment nastavuje automatické číslování prvků, například odstavců nebo nadpisů. Používá se společně se vlastností counter-reset, pseudoprvky after a before, vlastností content, uvnitř které se používá funkce counter. Pro lepší pochopení doporučuji podívat se na příklady.

Syntaxe

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

Hodnoty

Hodnota	Popis
název	Název čítače. Běžné slovo (jako název třídy nebo id). Lze nastavit více názvů oddělených mezerou. V tomto případě se současně změní několik čítačů.
krok	Celé kladné nebo záporné číslo. Nepovinný parametr.
`none`	Zakáže zvýšení čítače pro aktuální selektor.

Výchozí hodnota: none.

Příklad

Nastavme automatické číslování odstavců:

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

Příklad

Nechť kromě číslování přibude ještě nějaký text. V našem případě № před číslicí a tečka 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) ".";
}

Příklad

Začněme číslování od 10-ti. K tomu nastavíme počáteční hodnotu čítače na devět, tedy o 1 méně, než potřebujeme:

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

Příklad

Nechť je nyní číslování s krokem "2". K tomu jako 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) ".";
}

Příklad

V předchozím příkladu číslování začalo dvojkou, ale my bychom chtěli od jedničky. Proč k tomu došlo? Protože counter-reset resetuje hodnoty čítače na nulu a poté counter-increment přidá svůj krok: ve výchozím nastavení jedničku, proto dříve u nás číslování začínalo od 1. A nyní přibývá dvojka - a číslování začíná dvojkou.

K opravení problému nastavme počáteční hodnotu čítače na -1 a nyní číslování začne od 1 a bude se zvyšovat 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) ".";
}

Viz také

vlastnost counter-reset,
která resetuje hodnotu čítače na nulu