CSS ordered list: verschachtelte Listen mit Nummerierung

Eine nummerierte Liste („ordered list“) in HTML zu erstellen ist bekanntlich nicht schwer (<ol>). Wenn man eine Unterebene benötigt, so beginnt die Zählung wieder bei 1. Hier eine Lösung, mit der die untergeordneten Listeneinträge die Ziffer der übergeordneten Seite voran stellen.

Das Ergebnis soll in etwa so aussehen:

1. Ebene
   1.1. Unterpunkt 1
   1.2. Unterpunkt 2
   1.3. Unterpunkt 3
   1.4. Unterpunkt 4
   1.5. Unterpunkt 5
2. Ebene
   2.1. Unterpunkt 1
   2.2. Unterpunkt 2
   2.3. Unterpunkt 3
3. Ebene
   3.1. Unterpunkt 1
   3.2. Unterpunkt 2
   3.3. Unterpunkt 3

Um zum Ziel zu gelangen benötigt man Pseudoformate sowie die CSS Eigenschaften: counter, counter-reset und counter-increment.

Das HTML:

<ol class="ebene1">
  <li>Ebene 1
    <ol class="ebene2">
       <li>Unterpunkt 1</li>
       <li>Unterpunkt 2</li>
       <li>Unterpunkt 3</li>
       <li>Unterpunkt 4</li>
       <li>Unterpunkt 5</li>
    </ol>
  </li>
  <li>Ebene 2
    <ol class="ebene2">
       <li>Unterpunkt 1</li>
       <li>Unterpunkt 2</li>
       <li>Unterpunkt 3</li>
    </ol>
  </li>
  <li>Ebene 3
    <ol class="ebene2">
       <li>Unterpunkt 1</li>
       <li>Unterpunkt 2</li>
    </ol>
  </li>
</ol>

Und das notwendige CSS:

ol.ebene1 {
  counter-reset:listenpunkt_ebene1;
  list-style-type:none;
}
ol.ebene1 li:before {
  content: counter(listenpunkt_ebene1) ". ";
  counter-increment:listenpunkt_ebene1;
}
ol.ebene2 {
  counter-reset:listenpunkt_ebene2;
  list-style-type:none;
}
ol.ebene2 li:before {
  content: counter(listenpunkt_ebene1)"."counter(listenpunkt_ebene2,decimal) ". ";
  counter-increment:listenpunkt_ebene2;
}

Demo

Link: aktuell.de.selfhtml.org/artikel/css/nummerierung/

Hinweis: der Internet Explorer < 8 kann es nicht darstellen.