CSS Counter: Nummerieren

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.

Die CSS counter-Eigenschaft erzeugt einfache und komplexe Zähler und nummeriert Überschriften, Tabellenreihen oder Bilder in Slideshows ohne zusätzliche div- und span-Elemente oder den Einsatz von Javascript. Das Markup bleibt strikt und semantisch.

Einführung in CSS

Selektoren und Variablen

Responsive: mobile Geräte

Transition und Animation

<section>Einführung in CSS</section>
<section>Selektoren und Variablen</section>

CSS counter für Zähler und Nummerierung

// ::before macht den aktuellen Wert des Zählers sichtbar
section::before { 
    content: "Lektion " counter ( kapnum, upper-latin ) " • ";
                                     ^        ^
                                     |        |
                           Name des Zählers   Typ des Zählers
}

section  { 
    counter-increment: kapnum 1; 
                              ^
                              |
                       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.

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

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

Umstieg von der Kompaktkamera

Der Aufbau der Spiegelreflexkamera

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

Sensoren und Schärfentiefe

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

Der CMOS-Sensor der SLR

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

Aufnahmen richtig belichten

Das erste Foto mit der Spiegelreflexkamera

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

Die Bedienung der Spiegelreflexkamera

Sucher und Display die wichtigsten Bezugspunkte der Kamera.

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

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.