CSS/Eigenschaften/counter-increment
Aus SELFHTML-Wiki
< CSS | Eigenschaften
Die Eigenschaft counter-increment ermöglicht es, Elemente mit Hilfe von CSS-Zählern durchzunummerieren. So sind z.B. fortlaufende Kapitelnummerierungen möglich.
- Erlaubte Werte
Auflistung von Inkrement-Angaben, durch Leerstellen getrennt. Eine Inkrement-Angabe besteht aus
user-ident
: Name des Zählers, der erhöht werden soll.Zahl
: optional der Wert, um die erhöht werden soll. Wird er weggelassen, erhöht sich der Counter um 1
An Stelle der Auflistung können Sie auch dies setzen:
none
: es wird nicht gezählt. Diese Angabe ist nützlich, wenn für ein Elementcounter-increment
durch eine allgemeinere CSS-Regel gesetzt wird, aber im spezifischen Fall nicht inkrementiert werden soll.
- Vererbung steuernde Werte
inherit
,initial
,unset
undrevert
- Standardwert
none
- anwendbar auf
alle Elemente
(Inkrementieren geht überall - der Counter selbst kann nicht überall eingesetzt werden)- Vererbung
nein
- animierbar
nein
Beispiel
h1 {
counter-increment: Kapitel;
}
li.apfel {
counter-increment: Obst Apfel;
}
Die erste Regel erhöht den Wert von Kapitel um 1. Die zweite Regel inkrementiert die Zähler für Apfel und Obst - weil Äpfel Obst sind, bedeutet ein Apfel mehr, dass es auch ein Stück Obst mehr gibt.
Siehe auch
- HTML/Tutorials/Listen/Hybride Nummerierung#Zählen mit counter-increment
- Abrufen eines Zählerwerts mit
counter()
Weblinks
- Spezifikation (W3C): counter-increment
Liste der CSS-Eigenschaften
- generierter Inhalt
- content
- counter-increment
- counter-reset
- counter-set
- quotes
- Abstände
- Benutzeroberfläche
- Container
- Größenangaben
- Box-Ausrichtung
- Flexbox Layout
- Grid Layout
- Hintergründe
- Listen
- Tabellen
- Positionierung und Anzeige
- Scroll Snap
- Rahmen und Schatten
- Schriftformatierung
- Textformatierung
- Textausrichtung
- Umbruchsteuerung
- Transformationen
- Animationen