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

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

Werte

Standardwert: none.

Beispiel

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

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#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:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#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:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#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:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#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:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Siehe auch