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
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 :).
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:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-