CSS Counter: Automatisches Nummerieren

CSS counter Nummerieren und automatischer Zähler

counter sind Variablen, die von CSS verwaltet und hochgezählt werden, um das Vorkommen bestimmter Elemente zu zählen, ohne dabei Javascript einzusetzen.

counter und counter-increment erzeugen zusammen mit :: before oder :: after Pseudo-Elementen eine automatische Nummerierung von Kapiteln, Bildern und Tabellenzeilen.

HTML hat bereits ein Element, das automatisch durchzählt: ol, die geordnete Liste. Aber was, wenn Überschriften, Absätze oder Tabellenzeilen nummeriert werden sollen? Und zu guter Letzt unterwerfen sich Aufzählungen nur bedingt den CSS-Stilen, gerade der Index in der Markerbox verweigert jeden Eingriff.

Mann unter Feuer

Der abgewrackte Navy-Soldat Creasy übernimmt einen Bodyguard-Job in Mexiko.

Die Peanuts Der Film

Charlie Brown, Snoopy und Lucy haben ihren ersten Auftritt als computeranimierte Helden.

Stargate Origins

1930 kämpfen Professor Langford und seine Tochter noch mit den Rätseln des Artefakts.

Zähler mit CSS counter funktionieren nach einem einfachen Prinzip: So wie die gezählten Elemente sichtbar im Fluß der HTML-Seite liegen, wird der Zähler erhöht. Counter haben einen Namen, so dass auf einer Seite mehrere Zähler eingesetzt werden können.

Neben dem eindeutigen Namen (Identifier) gibt es eine optionale Schrittweite, so dass z.B. auch in Schritten von 2, 10 oder 17 durchgezählt werden kann.

                
section {                                // Selector
    counter-increment: mycounter 10;     // Zähler
}

section::before {                        // Macht den Zähler sichtbar
	content: counter(mycounter);     // Verweis auf den Zähler
}

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.

Tabellenzeilen nummerieren

Pseudo-Elemente sparen zusätzliches HTML-Markup und halten die HTML-Struktur übersichtlich. Zusammen mit CSS Counter ersparen sie obendrein auch den Einsatz von Javascript, wenn sie Elemente zählen und nummerieren.

AutorTitelISBN
feynman-physikRichard P. FeynmanThe lost lectures3 8273 7233 X
tim-und-struppiHergéTim und Struppi0 7382 0607 5
hawking-geschichte-der-zeitStephen HawkingKurze Geschichte der Zeit3 499 61968 7
umberto-ecoUmberto EcoSchüsse und Streichholzbriefchen3 446 20761 9

Erst ein Pseudo-Selektor wie :: before macht den aktuellen Wert des Zählers sichtbar.

td:nth-child(1)::before spricht die erste Zelle in jeder Zeile der Tabelle an und setzt den Zähler vor den Inhalt der ersten Zelle.

td:nth-child(1)::before {
   content: counter(tablerow) ' '; 
   color: #fff; background: silver;
}
tr:not(:first-child) { 
   counter-increment: tablerow; 
}

Der Zähler wird nicht schon in der ersten Zeile hochgezählt, denn in der ersten Zeile sitzen die Header der Tabellenspalten. tr:not(:first-child) liest sich als Alle Tabellenzeilen, nur nicht die erste Zeile.

Kapitel mit counter-increment nummerieren

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.

   Name des Zählers  -------+
                            |   +----- Schrittweite
                            |   |
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 Numerieren 211101427KAPITELABSATZFOLGENSEITEN