HTML-Elemente bequem per CSS-Counter zählen

CSS birgt so manche versteckte oder weniger beachtete Funktion. Jeder, der sich ein wenig mit dem Thema Webdesign beschäftigt, wird sicherlich schon ein Mal eine geordnete Liste erstellt haben. Die Listenelemente werden schrittweise um eins hochgezählt. Diese Abfolge kann man nicht beeinflussen oder gar optisch anpassen. Neben dem Eintrag steht einfach eine Zahl oder ein Buchstabe, der mitunter hässlich aussieht. Da hilft dann nur ausblenden oder stehen lassen. Beides sind eher keine wirklichen Glanzwege. Einerseits schaut es unschön aus und andererseits fehlen einem die Nummern. Was tun? Die Lösung heißt CSS-Counters. Ich zeig euch kurz, was ihr damit anstellen könnt.

Wie Sudoku lösen (Quelle: Tim Psych, Liz. CC BY 2.0)
Wie Sudoku lösen (Quelle: Tim Psych, Liz. CC BY 2.0)

Wenn wir bei der Liste bleiben. Dann braucht es hierzu nur wenige Zeilen CSS. Zunächst wird der eigentliche Listenstyle deaktiviert. Danach setzt der Zähler an. Diese Counter bestehen meist aus drei Anweisungen:

  • counter-reset — Zählweise auf 0 oder einen Anfangswert setzen
  • counter-increment — erhöhen um eine positive oder negative Schrittweite
  • content: counter() — schließlich möchte man den Counter auch sehen

Das Ganze sieht dann beispielhaft folgendermaßen aus:

ol {
  counter-reset: ol-count;
  list-style-type: none;
}
ol > li:before {
  counter-increment: ol-count;
  content: counter(ol-count);
}

Dieses einfache Beispiel könnt ihr nun euren Wünschen entsprechend anpassen. Dadurch wird euer Listencounter richtig gestaltbar, also genauso, wie jedes andere HTML-Element eben auch. So macht das Arbeiten mit Listen richtig Spaß. CSS-Counter sind aber durchaus vielfälltiger. Hiermit lassen sich noch ganz andere Sachen nummerieren. Ihr kennt in Word bestimmt das Inhaltsverzeichnis. Das geht dort richtig einfach. Wie macht man das in HTML? Da gibt’s auf den ersten Blick nichts. Doch halt. Was ist mit CSS-Zählern? Klar, das funktioniert. Um es auf den Punkt zu bringen, alle gleichartigen HTML-Elemente, die öfters innerhalb eines Dokument vorkommen, sind zählbar. Der eigenen Fantasie sind somit keine Grenzen gesetzt. Die Darstellung der Zähler ist in der Lage sämtliche optischen Möglichkeiten von list-style-type darzustellen.

CSS-Counter sind eigentlich ein alter Hut. Die Spezifikation existiert seit CSS 2.1 und wird von rund 93 Prozent aller Browser unterstützt. Auf JavaScript kann man an dieser Stelle getrost verzichten. Daher ist die Lösung verdammt schnell, schlank und simpel. Damit ihr ein besseres Gefühl für die Einsatzbereiche bekommt, habe ich ein kleines Beispiel auf jsFiddle bereitgestellt.


Play around with css counters

Wie gefällt euch diese Methode? War euch die Funktion vorher schon bekannt oder gänzlich neu?


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.