Eigenschaft counter-increment

Die Eigenschaft counter-increment legt die automatische Nummerierung von Elementen fest, zum Beispiel von Absätzen oder Überschriften. Sie wird zusammen mit der Eigenschaft counter-reset, den Pseudoelementen after und before, sowie der Eigenschaft content verwendet, innerhalb derer die Funktion counter zum Einsatz kommt. Zum besseren Verständnis empfehle ich, die Beispiele anzusehen.

Syntax

Selektor {
	counter-increment: Name [Schritt] | none;
}

Werte

Wert	Beschreibung
Name	Der Name des Zählers. Ein beliebiges Wort (wie ein Klassenname oder eine ID). Es können mehrere Namen vergeben werden, getrennt durch Leerzeichen. In diesem Fall werden mehrere Zähler gleichzeitig geändert.
Schritt	Eine positive oder negative ganze Zahl. Optionaler Parameter.
`none`	Verhindert das Erhöhen des Zählers für den aktuellen Selektor.

Standardwert: none.

Beispiel

Sorgen wir dafür, dass Absätze automatisch nummeriert werden:

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

Beispiel

Sorgen wir dafür, dass neben der Nummerierung noch ein weiterer Text hinzugefügt wird. In unserem Fall ein № vor der Zahl und ein Punkt danach:

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

Beispiel

Lassen wir die Nummerierung bei 10 beginnen. Dafür setzen wir den Anfangswert des Zählers auf neun, also um 1 weniger, als wir benötigen:

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

Beispiel

Sorgen wir nun dafür, dass die Nummerierung mit einer Schrittweite von "2" erfolgt. Dafür setzen wir eine Zwei als Schritt:

<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; /* setzen wir eine Zwei */
	content: "№" counter(test) ".";
}

Beispiel

Im vorherigen Beispiel begann die Nummerierung mit Zwei, wir wollten aber bei Eins beginnen. Warum ist das passiert? Weil counter-reset den Zählerwert auf Null zurücksetzt und anschließend counter-increment seinen Schritt hinzufügt: standardmäßig Eins, daher begann die Nummerierung vorher bei 1. Jetzt aber wird Zwei addiert - und die Nummerierung beginnt mit Zwei.

Um das Problem zu beheben, setzen wir den Anfangswert des Zählers auf -1. Nun beginnt die Nummerierung bei 1 und wird sich um 2 erhöhen:

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

Siehe auch

die Eigenschaft counter-reset,
die den Zählerwert auf Null zurücksetzt