counter-reset

Die Eigenschaft counter-reset ermöglicht die automatische Nummerierung von Elementen. Ähnlich wie ein geordnetes Listen-Element (<ol>).

article {
  counter-reset: section;
}
section {
  counter-increment: section;
}
section h2:before {
  content: counter(section) '. ';
}

Die Eigenschaft counter-reset wird verwendet, um einen CSS-Zähler auf einen bestimmten Wert zurückzusetzen.

Sie ist Teil des CSS-Zählermoduls, das Teil der CSS2.1-Spezifikation für generierte Inhalte, automatische Nummerierung und Listen ist, erweitert in der CSS3-Spezifikation für das Generated and Replaced Content Module.

Syntax

counter-reset: [<user-ident> <integer>?]+ | none</integer></user-ident>

Dabei…

• <user-ident></user-ident> ist der Name des Zählers, den Sie zurücksetzen möchten
• <integer></integer> ist der Wert, auf den der Zähler zurückgesetzt werden soll
• none deaktiviert den Zähler

body {
  counter-reset: my-awesome-counter 0;
}

Hinweis: Der Standardwert für die Ganzzahl ist 0. Wenn nach dem Zählernamen keine Ganzzahl angegeben wird, wird er auf 0 zurückgesetzt. Daher funktioniert dies wie erwartet

body {
  counter-reset: my-awesome-counter;
}

Sie können mehrere Zähler gleichzeitig mit einer durch Leerzeichen getrennten Liste zurücksetzen, jeder mit seinem spezifischen Wert, wenn Sie möchten.

body {
  counter-reset: my-awesome-counter 5 my-other-counter;
}

Dies setzt my-awesome-counter auf 5 und my-other-counter auf den Standardwert 0 zurück.

Sie können diese Liste als: counter1 wert1 counter2 wert2 counter3 wert3 ... betrachten. Wenn ein Wert weggelassen wird, ist er 0.

Demo

In der folgenden Demo setzt article den section-Zähler auf seinen Standardwert (0) zurück, der dann bei jedem Auftreten eines Abschnitts inkrementiert und dann vor den Abschnittsüberschriften angezeigt wird.

Browser-Unterstützung

Weitere Informationen

• CSS Generated Content Module Level 3
• MDN-Dokumentation

Verwandte Beiträge

Verwandt