CSS Zähler mit counter-increment und counter-reset

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.

// ::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-reset • 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 als hierarchischen Index, so wie wir es in vielen Fachbüchern oder Fachartikeln finden.

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 class="showcap">
   <header>Umstieg von der Kompaktkamera</header>
   <h4>Der Aufbau der Spiegelreflexkamera</h4>
   <p>Nicht immer fällt der Umstieg von der Kompaktkamera auf die Spiegelreflexkamera leicht.</p>
   <h4>Sensoren und Schärfentiefe</h4>
   <p>Der Sensor ist deutlich größer als die Sensoren von Kompaktkameras.</p>
</section>
<section class="showcap">
   <header>Aufnahmen richtig belichten</header>
   <h4>Das erste Foto mit der Spiegelreflexkamera</h4>
   <p>Wer früher seine analoge Kamera aus dem Karton holte, musste nur einen Film einlegen.</p>
   …
</section>
…

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.

CSS counter absteigend

Rückwärts kann CSS Counter ebenfalls.

Borussia M'gladbach

Borussia M'gladbach / FC Bayern 0:9

Leverkusen

Leverkusen / SGS Essen 0:5

Bremen

Bremen / Freiburg 0:3

MSV Duisburg

MSV Duisburg 0:6

<dl>
    <dt>Borussia M'gladbach</dt><dd>…</dd>
    <dt>Leverkusen</dt><dd>…</dd>
    <dt>Bremen</dt><dd>…</dd>
    <dt>MSV Duisburg</dt><dd>…</dd>
</dl>

dl { 
    counter-reset:item 13;
}
dt {
    counter-increment:item -1;
}
dt:before {
    content:counter(item) ". ";
}