Hauptmenü

Untermenü

Advanced CSS - Automatische Aufzählung

1. Fortlaufende Nummerierungen

Bei der Theorie zu HTML habt ihr gelernt, dass man geordnete Listen (<ol> nicht komplett und der Hierarchie entsprechen durchnummerieren kann. Aber mit CSS ist das möglich.

Der HTML-Code

... wurde von mir ein wenig zusammengestaucht, da der sonst viel zu lang geworden wäre. Außerdem arbeiten wir hier mit einer ungeordneten Liste. 


<ul>
  <li>A<ul><li>A1<ul>
          <li>A1-1</li><li>A1-2</li></ul>
        </li>
        <li>A2<ul>
          <li>A2-1</li><li>A2-2</li>
          <li>A2-3</li></ul></li></ul></li>
  <li>B</li>
  <li>C<ul>
        <li>C1</li>
        <li>C2<ul>
          <li>C2-1</li><li>C2-2</li></ul></li>
      <li>C3</li>      
    </ul>
  </li>
</ul>

2. Die CSS-Anweisungen

Da wir mit einer ungeordneten Liste arbeiten, müssen wir erst mal die Aufzählungszeichen entfernen. 


ul {
  list-style: none;
}

counter

Damit kann man tatsächlich einen hoch zählenden Wert "programmieren". Dazu benötigt man drei Anweisungen.

3. Hochzählen


li:before {
  content: counter(level1) " ";
  counter-increment: level1;
}
li li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}
li li li:before {
  content: counter(level1) "." counter(level2) "." counter(level3) " ";
  counter-increment: level3;
}

Erläuterung

Unsere Liste ist bis in dritte Ebene verschachtelt. Also brauchen wir auch (leider) drei entsprechende Anweisungen. Wichtig ist das level1 bis level3. Dabei handelt sich ganz grob gesagt um Variablen, in denen die Werte für die jeweilige Ebene gespeichert werden. Dabei ist es völlig lattens, wie die Dinger heißen. Man könnte sie auch bla, blubb und blubber nennen.

Zunächst mal geben wir den Wert der "Variable" aus. Also zum Beispiel mit content: counter(level1) " ";. Und dann wird der mit counter-increment: level1; hoch gezählt. Das macht man dann für alle drei Ebenen.

4. Resetten

Leider bringt das im Moment noch gar nichts, da überall nur Einsen stehen. Das hat mit der internen Zählweise zu. Definiert man zum Beispiel nur eine Anweisung für alle(!) <li>-Elemente, so werden die komplett von oben nach unten durchnummeriert, unabhängig von der Tiefe. Und darum muss man die Zähler zurücksetzen. 


body {
  counter-reset: level1;
}
li {
  counter-reset: level2;  
}
li li {
  counter-reset: level3;
}
li li li {
  counter-reset: none;
}

Erläuterung

Der Reset des jeweiligen Wertes findet immer im übergeordneten Element statt. Also counter-reset: level1; im body, counter-reset: level2; im ersten <li> und so weiter. Auf der untersten Ebene kann man natürlich nicht mehr zurücksetzen, muss aber ein none angeben, damit man nicht die Anweisung vom übergeordneten Listenpunkt erbt.

Ein Hinweis

Das body muss man nehmen, wenn die Liste als Ganzes(!) kein weiteres Oberelement hat. Denn den ersten Reset darf man nicht auf das ul legen. Ganz wichtig! Ansonsten kann man das nehmen, was sich darüber befindet, also zum Beispiel ein div.

Ein Hinweis noch. Das kann man auch mit Überschriften, Absätzen und was weiß ich nicht noch alles machen.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt