CSS-Zähler vs HTML ol
Für geordnete Listen nutzen wir fast immer das ol-Tag, während uns CSS counter eher selten begegnen. Aber geordnete Listen mit ol sind eher für kurze Aufzählungstexte gedacht und nicht für das Zusammenstellen komplexer Strukturen wie Kapitel und Unterkapitel.
.chap { counter-increment: kapnum 1; } .chap::before { content: "Lektion " counter(kapnum,upper-latin) " • "; }
Die CSS counter-Eigenschaft erzeugt einfache und komplexe Zähler und nummeriert Überschriften, Tabellenzeilen oder Bilder in Slideshows ohne zusätzliche div- und span-Elemente oder den Einsatz von Javascript. Das Markup bleibt strikt und semantisch.
Die gezählten Elemente müssen nicht aufeinander folgen. Sie brauchen nur einen gemeinsamen Selektor, z.B. eine CSS-Klasse oder einen Element-Selektor wie section oder article.
Zählertyp und Schrittweite
Jedem section-Element wird der String »Kapitel« vorangesetzt (in Blau) und ein Zähler »kapnum« um 2 heraufgezählt. Den Überschriften sollten also Kapitelnummern 2, 4, 6 … vorausgehen.
CSS counter für Zähler und Nummerierung
// ::before macht den aktuellen Wert des Zählers sichtbar section::before { color: blue; content: "Lektion " counter ( kapnum, upper-latin ) " • "; ^ ^ | | Name des Zählers Typ des Zählers } section { counter-increment: kapnum 2; ^ | Schrittweite }
CSS content::before macht den aktuellen Wert des Zählers sichtbar
Jedes Paar aus Zähler und Schrittweite legt den Wert fest, durch den der Zähler mit jedem Vorkommen des Selektors erhöht wird. Wird keine Schrittweite durch number angegeben, wird der Zähler automatisch um 1 erhöht.
Wenn die display-Eigenschaft des Elements none ist, wird der Zähler nicht erhöht. Wenn visibility: hidden ist, wird der Zähler erhöht.
CSS counter-increment
Erblich: Nein CSS2
- counter-increment
- Liste aus Paaren von identifier und number
- Werte
- [ <identifier> <integer>? ]+ | none | inherit
- none
- ist die Voreinstellung und verhindert das Hochzählen des Zählers.
- identifier integer
- identifier ist der Name des Zählers und kann sich auf eine Klasse, einen Identifier oder Selektor beziehen. Der Zahlenwert integer des Wertepaares ist die optionale Schrittweite und kann negative oder positive Werte annehmen. Wenn keine Schrittweiter angegeben ist, wird der Zähler um 1 erhöht.