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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

5 Kommentare
Felix
Felix

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

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
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
Thomas Quensen
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

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