Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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:

1. erste Ebene, erster Punkt
2. erste Ebene, zweiter Punkt
    1. zweite Ebene, erster Punkt
    2. zweite Ebene, zweiter Punkt
3. erste Ebene, dritter Punkt

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:

1. erste Ebene, erster Punkt
2. erste Ebene, zweiter Punkt
    2.1 zweite Ebene, erster Punkt
    2.2 zweite Ebene, zweiter Punkt
3. erste Ebene, dritter Punkt

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>

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe