CSS-Counter einrichten

Zunächst wird für das BODY-Element ein neuer Counter angelegt, der anschließend auf der Seite eingesetzt werden kann:

body {
  counter-reset: kapitel;
}

Es gibt nun den Counter „kapitel“, der über die CSS-Eigenschaft „counter-reset“ angelegt und auf Null gesetzt wurde. Im nächsten Schritt wird festgelegt, bei welchen HTML-Elementen der Counter einen weiter zählen solll:

h1 {
  counter-increment: kapitel;
}

Im obigen Beispiel wird der Counter „kapitel“ jedes Mal um Eins erhöht, wenn das H1-Element vorkommt. Ein Counter muss dabei jedoch nicht auf ein einziges Element begrenzt werden. Es lassen sich beliebige Elemente hinzufügen. Es wird dann immer um Eins weitergezählt, sobald eines der Elemente auf der Seite auftaucht.

CSS-Counter gestalten

Bislang wird die Nummerierung des Counters noch nirgendwo dargestellt. Dies lässt sich über Pseudoelemente wie „::before“ oder „::after“ realisieren:

h1::before {
  content: counter(kapitel) ". ";
}

Hier wird über „::before“ die jeweilige Nummerierung des Counters am Anfang des H1-Elementes ausgegeben. Zusätzlich kann – wie in dem Beispiel – ein Punkt sowie ein Leereichen hinten angehängt werden (in Anführungszeichen).

Wer statt arabischer Zahlen  römische Zahlen, griechische, beziehungsweise lateinische Buchstaben bevorzugt, kann dies über CSS ebenfalls einstellen. Es stehen hier alle Formatierungen zur Verfügung, die es auch für die Eigenschaft „list-style-type“ für sortierte Listen gibt:

h1::before {
  content: counter(kapitel, upper-roman) ". "; // große römische Zahlen
  content: counter(kapitel, upper-latin) ". "; // große lateinische Buchstaben
  content: counter(kapitel, lower-greek) ". "; // kleine griechische Buchstaben
}

Verschachtelte CSS-Counter

Verschachtelte Counter sind ebenfalls möglich. Neben einer Kapitelnummerierung lässt sich beispielsweise zusätzlich  eine Abschnittsnummerierung einrichten. Dazu wird der Counter an der Stelle angelegt, an der er jeweils wieder von vorne zu zählen beginnen soll:

h1 {
  counter-increment: kapitel;
  counter-reset: abschnitt;
}

Im Beispiel wird immer dann, wenn eine neue Überschrift mit dem H1-Element vorkommt, der verschachtelte Counter „abschnitt“ auf Null gesetzt. Die CSS-Einstellungen für den verschachtelten Counter werden analog zum übergeordneten Counter vergeben:

h2 {
  counter-increment: abschnitt;
}

h2::before {
  content: counter(kapitel) ". ";
}

Rückwärts zählen und Zahlen überspringen

Im Normalfall zählt der Counter jeweils immer Eins hinzu, wenn das entsprechende HTML-Element auf der Seite vorkommt. Es lässt sich aber auch eine alternative Zählung einrichten. So kann der Counter beispielsweise rückwärts zählen oder jeweils Zwei oder Drei addieren:

h1 {
  counter-increment: kapitel; // 1, 2, 3, 4, ...
  counter-increment: kapitel 2; //  2, 4, 6, 8, ...
  counter-increment: kapitel -1; // -1, -2, -3, -4, ...
}

Ihr seht, es gibt viele Möglichkeiten, die Funktionalität und das Aussehen eines Counters mit reinem CSS zu modifizieren. Da der Counter mit CSS2 spezifiziert wurde, unterstützen ihn alle modernen Browser zum jetzigen Zeitpunkt bereits. Sogar der Internet Explorer ab Version 8 kann die hier verwendeten CSS-Properties korrekt interpretieren, benötigt dazu aber zwingend eine Doctype-Definition.

Habt ihr einen CSS-Counter schon einmal eingesetzt? Wie und wofür nutzt ihr ihn?

Weiterführende Links zum Thema CSS:

• Geniale CSS-Animation: Der gehende Mann
• CSS3: So werden Texte einfach mehrspaltig
• Keine Angst vorm Internet – HTML & CSS für Einsteiger