ArticleCounter in CSS

Das man Counter mit CSS realisieren kann, z.B. zur Nummerierung von Listen oder Überschriften, ist bekannt. Es wird zum Beispiel ausführlich in einem SelfHTML-Artikel beschrieben. Was passiert aber mit der Nummerierung, wenn sich die Reihenfolge durch DOM-Manipulation einmal verändert?

Erst einmal ein kurzes Beispiel für einen solchen Counter. In einem übergeordneten DOM-Element wird ein Counter definiert:

#questListEdit  {
  counter-reset: quest;
}

Dieser Counter hat den Namen ‘quest’ und kann innerhalb des DOM-Elements verwendet werden.

Bei den Elementen, die die Nummerierung bekommen sollen, geben wir den Counter mit einem Punkt aus und erhöhen ihn anschließend:

#questListEdit .questCounter:before {
  content: counter(quest) ". ";
  counter-increment: quest;
}

In meinem Fall habe ich damit eine Liste von Fragen durchnummeriert. Hier mal ein Screenshot davon:

Die Reihenfolge dieser Liste kann der Nutzer mit der Maus verändern (wen es interessiert mit JQuery-UI), was natürlich die Nummerierung durcheinanderbringen sollte. Aber auf magische Weise passiert es nicht, d.h. wenn ich “3. Frage” an die erste Stelle schiebe ist es “1. Frage”. Die Browser (Firefox, Chrome und InternetExplorer auf meinem Rechner) aktualisieren den CSS-Counter.

Ich bin begeistert!

Keywords