CSS counter, -increment, -reset : Nummerierung

counter, counter-increment und counter-reset erzeugen eine automatische Nummerierung von Kapiteln, Absätzen, Bildunterschriften oder Bildern und bilden dabei einen hierarchischen Index.

HTML hat bereits ein Element, das automatisch durchzählt: ol, die geordnete Liste. Was, wenn Überschriften oder Absätze nummeriert werden sollen? counter sind Variablen, die von CSS verwaltet und hochgezählt werden, um das Vorkommen bestimmter Elemente zu zählen.

CSS counter funktioniert nach einem einfachen Prinzip: So wie die gezählten Elemente sichtbar im Fluß der HTML-Seite liegen, wird der Zähler um 1 erhöht. Counter haben einen Namen, so dass auf einer Seite mehrere Zähler aktiv sein können. Counter nummerieren Bilder in Slideshows, Tabellenzeilen in Preislisten und die Kapitel von eBooks.

CSS counter-increment ist eine Liste mit Paaren von identifier und number, die als Zähler für einen Selektor wirken. identifier ist der Name, number ist die Schrittweite des Zählers.

                    
     Schrittweite des Zählers (number)  +
                                        |
                                        V
section { counter-increment: mycounter 10; }
  ^                              ^
  |                              |
  +-- Selektor                   |      
                                 |
                                 +-- Zähler (identifier)

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.

Kapitel mit counter-increment nummerieren

Jetzt haben wir zwar einen Zähler, aber erst CSS content::before macht den aktuellen Wert des Zählers sichtbar.

Jedem h6-Element wird der String »Kapitel« vorangesetzt (in Rot) und ein Zähler »kapnum« um 2 heraufgezählt. Den Überschriften sollten also Kapitelnummern 2, 4, 6 … vorausgehen.

         identifier  -------+
                            |   +----- number
                            |   |
h6  { counter-increment: kapnum 2; } 

h6:before { content: "Kapitel " counter(kapnum) " • "; color: red; }

Zähler und Schrittweite

Bei jedem h6 wird der Zähler um 2 erhöht

display:none

Kein Heraufzählen, wenn display:none notiert ist

visibility:hidden

Bei visibility:hidden wird der Zähler erhöht

elem::before { content:index}

Erst elem::before macht den Zähler sichtbar

Nur echt mit roten Kapitelnummern – Wenn die Kapitelüberschriften mit 2,4, 6 durchnummeriert sind und der Text »Kapitel« die Überschrift einleitet, unterstützt der Browser die CSS counter-increment.

Alle modernen Browser unterstüzen counter-increment, IE ab Version 8.

CSS counter-reset • CSS Zähler zurücksetzen

Zusammen mit counter-reset nummeriert counter-increment eine Liste als aufeinander folgende Kapitel und Unterkapitel mit 1.0, 1.1, 1.2 ….

Bei dem Vorkommen von section wird der Zähler für h3 zurückgesetzt (wenn number nicht angegeben ist, wird der Zähler per Vorgabe auf Null zurückgestellt).

section { counter-increment: section-counter; 
   ^      counter-reset: h3-counter; }
   |
   +-- Bei jedem Vorkommen von section wird section-counter hochgezählt
       und h3-counter zurückgesetzt auf 1

section:before { content: "Kapitel " counter(section-counter); }
                     ^
                     |
                     +-- Vor jedes section wird "Kapitel " und der 
                         Wert des Zählers section-counter gesetzt

section h3 { counter-increment: h3-counter; }
        ^
        |
        +-- Bei jedem Vorkommen von h3 wird der Zähler 
            h3-counter hochgezählt 
   
section h3:before { 
   content: counter(section-counter) "." counter(h3-counter) " "; }
     ^
     |
     +-- Vor jedes section h3 wird der Wert section-counter gesetzt
         gefolgt von einem Punkt
         gefolgt vom Wert des Zählers h3-counter

<section>
	<h3>In der Dachstube</h3>
	<p>Zwischen dem Fenster …</p>
	<h3>Vergessene Artefakte</h3>
	<p>Aber im Anschluss an das allmorgendlich Staubwischen … </p>
	<h3>Vasen auf der Fensterbank</h3>
	<p>Sie eilte die Treppe hinunter … </p>
</section>
<section> 	… </section>
<section> 	… </section>

In der Dachstube

Zwischen dem Fenster und der kleinen Kommode lag ein grüner Teppich mit Fransen.

Vergessene Artefakte

Aber im Anschluss an das allmorgendlich Staubwischen hatte sie den grünen Teppich bereits vergessen.

Vasen auf der Fensterbank

Sie eilte die Treppe hinunter – ihre ganze Hoffnung lang nun auf die Vase auf der schmalen Fensterbank.

Vor dem Fenster

Zwischen dem Fenster und der kleinen Kommode lag ein grüner Teppich mit Fransen.

Säulen der Hoffnung

Aber im Anschluss an das allmorgendlich Staubwischen hatte sie den grünen Teppich bereits vergessen.

Sie eilte die Treppe hinunter – ihre ganze Hoffnung lang nun auf die Vase auf der schmalen Fensterbank.

Tabellenzeilen nummerieren

Mit CSS counter-increment werden Tabellenzeilen gezählt,

Kowalski, Adam	Der geheimnisvolle Rosenstrauch	320 Seiten
Arnim, Elisabet	Die Reisegesellschaft	260 Seiten
Gable, Rebecca	Das Spiel der Könige	800 Seiten
Austen, Jane	Sanditon	270 Seiten

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.

CSS counter-reset

Erblich: Nein

counter-reset
Werte: [ <identifier> <integer>? ]+ | none | inherit

none: none ist die Voreinstellung und verhindert, dass der Zähler zurückgesetzt wird.
identifier integer: Der Identifier-Wert des Wertepaares ist erforderlich und identifiziert den Zähler. Er kann durch eine Klasse, eine id oder durch einen Selektor angesprochen werden. Der optionale numerische Wert ist der Wert, auf den der Zähler zurückgesetzt wird, wenn der spezifische Selektor vorgefunden wird. number kann positive und negative Werte annehmen. Wenn number nicht angegeben ist, wird der Zähler per Vorgabe auf "0" zurückgesetzt.