Übersicht

Die counter-increment CSS Eigenschaft wird verwendet, um den Wert von CSS Zählern um einen bestimmten Wert zu erhöhen. Der Wert des Zählers kann durch die counter-reset CSS Eigenschaft zurückgesetzt werden.

Initialwertnone
Anwendbar aufalle Elemente
VererbtNein
Medienalle
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* Erhöht 'counter-name' um 1 */
counter-increment: counter-name;

/* Verringert 'counter-name' um 1 */
counter-increment: counter-name -1;

/* Erhöht 'counter1' um 1 und verringert 'counter2' um 4 */
counter-increment: counter1 counter2 -4;

/* Belässt die Zähler unverändert: wird verwendet, um weniger spezifische Werte zu verstecken */
counter-increment: none;

/* Globale Werte */
counter-increment: inherit;
counter-increment: initial;
counter-increment: unset;

Werte

<custom-ident>
Der Name des Zählers, der erhöht bzw. verringert werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben a bis z, den Zahlen 0 bis 9, Unterstrichen (_), und/oder Bindestrichen (-). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder none, unset, initial oder inherit unabhängig von Groß- und Kleinschreibung sein.
<integer>
Der Wert, der dem Zähler hinzugefügt wird. Falls nicht angegeben, wird 1 verwendet.
none
Keiner der Zähler wird verändert. Dieser Wert wird als Standardwert verwendet oder um eine Erhöhung bzw. Verringerung in spezifischeren Regeln zurückzusetzen.

Es können beliebig viele Zähler erhöht bzw. verringert werden, jeder durch ein Leerzeichen getrennt.

Formale Syntax

[ <custom-ident> <integer>? ]+ | none

Beispiele

h1 {
  counter-increment: chapter section 2 page;
  /* Erhöht den Wert der 'chapter' und 'page' Zähler um 1
     und den 'section' Zähler um 2. */
}

Spezifikationen

Spezifikation Status Kommentar
CSS Lists Module Level 3
Die Definition von 'counter-increment' in dieser Spezifikation.
Arbeitsentwurf Keine Änderung
CSS Level 2 (Revision 1)
Die Definition von 'counter-increment' in dieser Spezifikation.
Empfehlung Ursprüngliche Definition

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
Grundlegende UnterstützungChrome Vollständige Unterstützung 2Edge ? Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 8Opera Vollständige Unterstützung 9.2Safari Vollständige Unterstützung 3WebView Android ? Chrome Android ? Edge Mobile Vollständige Unterstützung JaFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: SJW, Sebastianz, fscholz
Zuletzt aktualisiert von: SJW,