Właściwość counter-increment

Właściwość counter-increment ustawia automatyczne numerowanie elementów, na przykład akapitów lub nagłówków. Używana wspólnie z właściwością counter-reset, pseudoelementami after i before, właściwością content, wewnątrz której używana jest funkcja counter. Dla lepszego zrozumienia polecam zapoznać się z przykładami.

Składnia

selektor {
	counter-increment: nazwa [krok] | none;
}

Wartości

Wartość	Opis
nazwa	Nazwa licznika. Zwykłe słowo (jak nazwa klasy lub id). Można ustawić kilka nazw, oddzielając je spacją. W tym przypadku jednocześnie będą zmieniane kilka liczników.
krok	Liczba całkowita dodatnia lub ujemna. Parametr opcjonalny.
`none`	Zabrania zwiększania licznika dla bieżącego selektora.

Wartość domyślna: none.

Przykład

Sprawmy, aby akapity były numerowane automatycznie:

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

Przykład

Niech oprócz numeracji dodany będzie jeszcze jakiś tekst. W naszym przypadku № przed cyfrą i kropka po:

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

Przykład

Zacznijmy numerację od 10. W tym celu wartością początkową licznika ustawiamy dziewięć, czyli o 1 mniej, niż potrzebujemy:

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

Przykład

Niech teraz numeracja będzie z krokiem "2". W tym celu jako krok ustawiamy dwójkę:

<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; /* ustawiamy dwójkę */
	content: "№" counter(test) ".";
}

Przykład

W poprzednim przykładzie numeracja zaczęła się od dwójki, a chcielibyśmy od jedynki. Dlaczego się tak stało? Ponieważ counter-reset resetuje wartości licznika do zera, a następnie counter-increment dodaje swój krok: domyślnie jedynkę, dlatego wcześniej nasza numeracja zaczynała się od 1. A teraz dodawana jest dwójka - i numeracja zaczyna się od dwójki.

Aby naprawić problem, ustawmy wartość początkową licznika na -1 i teraz numeracja zacznie się od 1 i będzie zwiększana 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) ".";
}

Zobacz też

właściwość counter-reset,
która resetuje wartość licznika do zera