CSS counter und counter-increment – Zähler und Nummerieren

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.

Einführung in CSS

Selektoren und Variablen

.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.

Responsive: mobile Geräte

Transition und Animation

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 section::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.

Zurücksetzen – Reset des Zählers

counter-reset setzt einen CSS counter zurück – im Normalfall auf 1. counter-reset wird nicht auf die gezählten Elemente angewendet, sondern braucht ein übergeordnetes Element, um den Zähler wieder bei 1 oder einem beliebigen Wert erneut zu starten.

Mit Hilfe von counter-reset muss der CSS counter nicht bei 1 anfangen, kann Elemente überspringen und einen hierarchischen Index aufbauen.

Ein Zähler soll i.d.R. zurückgesetzt werden, wenn er bei wiederkehrenden Elementen neu starten soll. Ein einfacher Fall ist z.B. eine Tabelle, in der die Spalten der einzelnen Zellen mit counter-increment gezählt werden. Wenn eine neue Zeile beginnt, wird der Zähler mit counter-reset wieder auf 1 gesetzt.

Der Zähler selbst liegt auf den td-Elementen, counter-reset wird durch die tr-Tags ausgelöst.

tr { 
   counter-reset: tabnum;
}
td { 
   counter-increment: tabnum 1; 
}
td::before {
   content: counter(tabnum);
}

Hierarchischer Index 1.1, 1.2, … 2.1, 2.2 …

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>
…

Umstieg von der Kompaktkamera

Der Aufbau der Systemkamera

Nicht immer fällt der Umstieg von der Kompaktkamera auf die Systemkamera leicht.

Sensoren und Schärfentiefe

Der Sensor ist deutlich größer als die Sensoren von Kompaktkameras.

Der CMOS-Sensor

An die Stelle des Films ist bei digitalen Systemkamera der Sensor getreten.

Aufnahmen richtig belichten

Das erste Foto mit der Systemkamera

Wer früher seine analoge Kamera aus dem Karton holte, musste nur einen Film einlegen.

Die Bedienung der Systemkamera

Sucher und Display die wichtigsten Bezugspunkte der Kamera.

Beim ersten Tippen des Auslösers zeigt die Statuszeile des Suchers die Informationen der Belichtung

Counter Anfang

Und was, wenn der Counter nicht bei 1, sondern bei 10 oder 100 anfangen soll? counter-reset ist die Antwort. Das Reset gilt natürlich nicht den gezählten Elementen, sondern steht für das umfassende Element. Im Fall einer ungeordneten Liste wie in diesem Beispiel wäre das ul-Element das umfassende Element.

Mohnblumenfeld bei Argenteuil
Seerosen, etwa 1915
Der Spaziergang, Frau mit Sonnenschirm
Die Elster

HTML

<ul class="maler">
   <li>Mohnblumenfeld bei Argenteuil
   <li>Seerosen, etwa 1915
   <li>Der Spaziergang, Frau mit Sonnenschirm
   <li>Die Elster
</ul>

CSS

ul {
   list-style-type: none;
   counter-reset: numlist 20
}

li  { 
  counter-increment: numlist 1; 

} 
li::before { 
  content:  counter(numlist) " Claude Monet  – "; 
}

CSS counter absteigend

Rückwärts kann CSS Counter mit Hilfe von counter-reset 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) ". ";
}

Elemente nicht mitzählen

Wird ein Element nicht mitgezählt, weil es z.B. durch :not() vom Counter ausgeschlossen werden soll, hilft ebenfalls ein Reset.

Mohnblumenfeld bei Argenteuil
Seerosen, etwa 1915
Der Spaziergang, Frau mit Sonnenschirm
Die Elster

HTML

<ul>
   <li>Mohnblumenfeld bei Argenteuil
   <li>Seerosen, etwa 1915
   <li>Der Spaziergang, Frau mit Sonnenschirm
   <li>Die Elster
</ul>

ul {
   list-style-type: none;
   counter-reset: numlist -1;
}

ul li  { 
   counter-increment: numlist; 
}

ul li:not(:first-child)::before { 
   content:  counter(numlist) " Claude Monet  – "; 
}

Soweit sieht das ganz einfach aus. Aber wie kann man Elemente überspringen, ohne einen Index auszulassen?

Zehn kleine Kinderlein, die spielten in der Scheun', eines war im Heu versteckt, da waren's nur mehr neun.
Strophe auslassen, weil das neunte Kind gemobbt wurde, nur weil es nicht mitgelacht hat.
Acht kleine Kinderlein, die sind zusammen blieb'n, eines ist davon gerannt, da waren's nur mehr sieb'n.
Sieben kleine Kinderlein, bestaunten ein Gewächs, eines hat sich drin verstrickt, da waren's nur noch sechs.

HTML

<ul class="skipper">
   <li>Zehn kleine Kinderlein …
   <li>Strophe auslassen …
   <li class="skipping">Acht kleine Kinderlein …
   <li>Sieben kleine Kinderlein …
</ul>

CSS

ul.skipper {
   list-style-type: none;
   counter-reset: numlist 0;
}

ul.skipper li  { 
   counter-increment: numlist 1; 
} 
ul.skipper li:not(:nth-child(2)):before { 
   content:  counter(numlist) ". Strophe "; 
}

ul.skipper li.skipping:before {
   counter-increment: numlist -1
}

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.