Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS-Counter: Nummerierungen für beliebige HTML-Elemente

3, 2, 1

Die einfachste Möglichkeit, einen Textabschnitt zu nummerieren, ist die Verwendung einer sortierten Liste mit dem OL-Element. Wenn aber komplexe Bereiche mit Aufzählungen versehen werden sollen, ist die sortierte Liste nicht immer praktikabel. CSS liefert eine weitere Option, die wir euch im folgenden kurz vorstellen.

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: Weniger kompliziert als das irische Wahlrecht. Versprochen! (Foto: infomatique / flickr.com, Lizenz: CC-BY-SA)

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:

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Thomas Quensen

Auch sehr nützlich als Ersatz der normalen Nummerierung bei sortierten Listen, also einfach list-style: none; und dafür die counter verwenden, da diese generierten Nummern dank ::before viel besser gestaltet werden können.

In dem Zusammenhang sehr lesenswert: http://www.peterkroener.de/effektvolles-zahlen-mit-css-countern-und-absoluter-positionierung/

Antworten
Blog-Experiment

Sehr interessant. Hatte ich bislang noch gar nichts von gehört. Ist aber auf jeden Fall eine schöne Sache, wenn man bei längeren Texten keine Nummerierung von Hand vornehmen will. So eine Automatisierung kann da auf jeden Fall einiges an Zeit sparen.

Antworten
Dude

Steht doch da, beispielsweise zum Durchnummerieren bei Kapiteln.

Habe von der Funktionalität noch nie gehört - werde ich mal austesten. Wie sieht es mit der Kompatibilität aus?

Antworten
Felix

sorry, wenn ich doof frag, aber für was genau gibt es da Einsatzmöglichkeiten?

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst