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

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.

.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.

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.

// ::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 section::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.