CSS Zähler mit counter-increment und counter-reset

CSS counter für einen mehrstufigen Index

counter, counter-increment und counter-reset erzeugen eine automatische Nummerierung von Kapiteln und Absätzen und können auch einen hierarchischen Index einsetzen.

Anders als geordnete Listen mit HTML ol können CSS Elemente zählen, die im Dokument verteilt und nicht direkt nacheinander liegen.

18-12-15 SITEMAP

CSS-Zähler vs HTML ol

Für geordnete Listen nutzen wir fast immer das ol-Tag, während uns CSS counter eher selten begegnen. Aber geordnete Listen mit ol sind eher für kurze Aufzählungstexte gedacht und nicht für das Zusammenstellen komplexer Strukturen wie Kapitel und Unterkapitel.

Einführung in CSS
Selektoren und Variablen
.chap  { 
  counter-increment: kapnum 1; 
} 
.chap::before { 
  content: "Lektion " counter(kapnum,upper-latin) " • "; 
} 

Die CSS counter-Eigenschaft erzeugt einfache und komplexe Zähler und nummeriert Überschriften, Tabellenzeilen oder Bilder in Slideshows ohne zusätzliche div- und span-Elemente oder den Einsatz von Javascript. Das Markup bleibt strikt und semantisch.

Die gezählten Elemente müssen nicht aufeinander folgen. Sie brauchen nur einen gemeinsamen Selektor, z.B. eine CSS-Klasse oder einen Element-Selektor wie section oder article.

Responsive: mobile Geräte
Transition und Animation

Zählertyp und Schrittweite

Jedem section-Element wird der String »Kapitel« vorangesetzt (in Blau) und ein Zähler »kapnum« um 2 heraufgezählt. Den Überschriften sollten also Kapitelnummern 2, 4, 6 … vorausgehen.

CSS counter für Zähler und Nummerierung
// ::before macht den aktuellen Wert des Zählers sichtbar
section::before { 
    color: blue;
    content: "Lektion " counter ( kapnum, upper-latin ) " • ";
                                     ^        ^
                                     |        |
                           Name des Zählers   Typ des Zählers
}

section  { 
    counter-increment: kapnum 2; 
                              ^
                              |
                       Schrittweite
} 

CSS content::before macht den aktuellen Wert des Zählers sichtbar

Jedes Paar aus Zähler und Schrittweite legt den Wert fest, durch den der Zähler mit jedem Vorkommen des Selektors erhöht wird. Wird keine Schrittweite durch number angegeben, wird der Zähler automatisch um 1 erhöht.

Wenn die display-Eigenschaft des Elements none ist, wird der Zähler nicht erhöht. Wenn visibility: hidden ist, wird der Zähler erhöht.

CSS counter-increment

Erblich: Nein CSS2

counter-increment
Liste aus Paaren von identifier und number
Werte
[ <identifier> <integer>? ]+ | none | inherit
none
ist die Voreinstellung und verhindert das Hochzählen des Zählers.
identifier integer
identifier ist der Name des Zählers und kann sich auf eine Klasse, einen Identifier oder Selektor beziehen. Der Zahlenwert integer des Wertepaares ist die optionale Schrittweite und kann negative oder positive Werte annehmen. Wenn keine Schrittweiter angegeben ist, wird der Zähler um 1 erhöht.