Zähler/Variablen in CSS verwenden

Beispiel fortlaufender Nummerierung bei Listen auch bei Unterpunkten mit CSS

Weniger bekannt aber in manchen Fällen sehr praktisch sind die Zähler in CSS, die eigentlich eine Variable darstellen, die hochgezählt werden kann.

Dazu gibt es folgende Anweisungen:

• counter-reset: variablenname;
• counter-increment: variablenname;
• counter(variablenname)

Im folgenden Beispiel wird vor jeder h2-Überschrift eine Nummerierung und Text eingefügt.

Unser HTML-Code mit verschiedenen Überschriften (h2 und h3):

<h2>Überschrift h2</h2>
<h3>Überschrift h3</h3>
<h3>mitten im Text Überschrift h3</h3>
<h2>mitten im Text Überschrift h2</h2>
<h3>letzte Überschrift h2</h3>

Jetzt setzen wir oben genannte 3 CSS-Anweisung Schritt für Schritt ein.

Im ersten Schritt müssen wir die Variable definieren.

body {
  counter-reset: variableA; 
}

Damit setzen wir die Variable mit dem Namen „variableA“ auf 0. Der Variablenname sollte natürlich sinnvoll vergeben werden und gehorcht den Regeln wie bei Dateinamen: „keine Sonderzeichen, keine Leerzeichen“.

Im nächsten Schritt sagen wir, wo wir diese Variable nutzen wollen – sprich, wo diese ausgegeben werden soll. Wir wollen vor jeder <h2> die Ausgabe der Nummer.

Im zweiten Schritt lassen wir unsere Variable hochzählen über counter-increment.

h2::before {
  counter-increment: variableA;
}

Und nun brauchen wir noch die Ausgabe – diese erfolgt über content: counter(variableA);

h2::before {
  counter-increment: variableA;
  content: counter(variableA);
}

Jetzt noch eine zusätzliche Textausgabe vor und nach unserer Variablen. Der Text wird dazu in CSS in Anführungszeichen gesetzt.

h2::before {
  counter-increment: variableA;
  content: "Text davor " counter(variableA) ": ";
}

Das Gleiche wollen wir für unsere <h3>, allerdings soll nach unserer Überschrift die Ausgabe erfolgen. Hier der dazugehörige ergänzte Quellcode.

body {
  counter-reset: variableA;
  counter-reset: variableB;
}
h2::before {
  counter-increment: variableA;
  content: "Text davor " counter(variableA) ": "; 
}
h3::after {
  counter-increment: variableB;
  content: " - " counter(variableB) ". Text danach";
}

Nummerierung der zweiten Ebene mit Nummerierung aus erster Ebene ergänzen

Und nun ein komplexes Beispiel (wird aber öfters benötigt) für den Einsatz von Variablen. Wir wollen für eine sortierte Liste (die standardmäßig automatisch durchnummeriert wird) die Nummerierung in der zweiten Ebene mit der Nummerierung aus der ersten Ebene ergänzen. In der Standardausgabe von <ol> würde es so aussehen – im folgenden Beispiel bitte die zweite Ebene beachten:

Wir wollen aber, dass unsere zweite Ebene automatisch die Nummerierung aus der ersten Ebene zusätzlich anzeigt. Es soll folgende Ausgabe alleine durch Einsatz von CSS erfolgen:

Dazu wird folgender CSS-Code benötigt:

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}

Wer sich fragt, warum das überhaupt funktioniert - bei ol wird für jedes ol-Element eine neue Instanz des Abschnittszählers erzeugt. Daher klappt es auch sofort problemlos, wenn eine weitere Unterebene dazukommen sollte.

Und wer die Ausgabe supersauber untereinander benötigt bekommt hier die Lösung

Hier der komplette Code zum selber nachvollziehen:

<style>
#fortlaufendernummerierung ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}
#fortlaufendernummerierung ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}
#fortlaufendernummerierung ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
  padding-top: 0.6em;
}
#fortlaufendernummerierung li ol > li {
  margin: 0;
}
#fortlaufendernummerierung li ol > li:before {
  content: counters(item, ".") " ";
}
#fortlaufendernummerierung ol li {
  /*background-color: yellow;*/
  background-image: url(bilder/parag.gif);
  background-repeat: no-repeat;
  background-position: 2px 10px;
  padding-left: 20px;
}
#fortlaufendernummerierung ol li ol li {
  background-color: white;
  background-image: none;
  padding-left: 0px;
}
</style>
<h1>Beispiel fortlaufender Nummerierung bei Listen 
auch bei Unterpunkten mit CSS</h1>
<div id="fortlaufendernummerierung">
<ol>
   <li>Schinken</li>
   <li>Käse
   	<ol>
   		<li>Parmesan</li>
   		<li>Emmentaler</li>
   	</ol>
   </li>
   <li>Pilze</li>
</ol>
</div>