Alphanumerische Gliederung mit CSS

Verschachtelte Listen werden schnell sehr unübersichtlich. Einige Leute schwören deshalb bis heute auf alphanumerische Gliederungen, obwohl diese eigentlich nur noch in juristischen Texten Anwendung finden. (Siehe den dazu passenden Wikipedia-Artikel)

Trotzdem würde ich in diesem Tutorial gerne auf diese alphanumerische Gliederung eingehen.

Eine simple nummerierte Liste sieht so aus:

  1. Lorem
    1. Lorem
    2. Lorem
      1. Lorem
        1. Lorem
        2. Lorem
        3. Lorem
      2. Lorem
    3. Lorem
  2. Lorem

Durchaus nicht sehr übersichtlich.

Hier scheiden sich die Geister, doch für tief verschachtelte Listen bevorzuge ich eine Gliederung wie diese:

  • Lorem
    • Lorem
      • Lorem
        • Lorem
          • Lorem
            • Lorem
              • Lorem
              • Lorem
        • Lorem
          • Lorem
          • Lorem
  • Lorem

Eine Menge CSS

Die ersten drei Ebenen lassen sich problemlos mit der list-style-type -Property umsetzen.

In den tieferen Ebenen besteht die Nummerierung nicht mehr aus nur einem Zeichen und einem Punkt. Wir müssen eine eigene Nummerierung einführen.

Zuerst entfernen wir die normale Nummerierung.

Unsere eigene Nummerierung fügen wir mit :before  und content:  ein. Ein Counter ist für das Zählen zuständig.

Natürlich braucht jede Ebene ihren eigenen Counter. Der fertige Code für sieben Ebenen alphanumerische Gliederung würde so aussehen: