CSS-Eigenschaft: counter-increment, Kategorien: Generierte Inhalte (allgemein), Generated content, automatic numbering, and lists (CSS 2.1), Generated and Replaced Content (CSS 3)
Zählschritt für die automatische Nummerierung
Definiert, in welchen Schritten ein Zähler hoch gezählt wird, welcher per Pseudo-Attribut :before oder :after und der CSS-Eigenschaft "content" einem HTML-Element zugefügt wird.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Zählschritt für die automatische Nummerierung |
| none |
Verwandte Eigenschaften aus der Kategorie: Generierte Inhalte (allgemein), Generated content, automatic numbering, and lists (CSS 2.1), Generated and Replaced Content (CSS 3):
- content
- Aktuelle Seite: counter-increment
- counter-reset
- crop
- display
- list-style
- list-style-image
- list-style-position
- list-style-type
- move-to
- page-policy
- quotes
Folgendes ist beim Einsatz von counter-increment zu beachten:
- Benötigt immer die Angabe der CSS-Eigenschaft content, über die "generierter Content" zur HTML-Ausspielung hinzugefügt wird.
- Mit der CSS-Eigenschaft content wird die Variable über das Schlüsselwort counter() angesprochen und ausgespielt.
- content selber muss immer mit einem dem Pseudo-Attribut :before oder :after angesprochen werden, damit counter-increment greifen kann.
- Ebenfalls ist die Angabe der CSS-Eigenschaft counter-reset erforderlich, um damit den Zähler zu initialisieren. Dabei ist wichtig, dass counter-reset nicht dem HTML-Element selber zugewiesen wird, sondern einem Parent-Element. In den Beispielen Nr. 1 und Nr. 2 fehlt die Angabe von counter-reset, woran die korrekte Ausspielung bzw. die Wirkung von counter-increment scheitert. In Beispiel Nr. 3 ist counter-reset innerhalb des angesprochenen Elements definiert und führt den Reset in jedem Element erneut aus. Auch dort wird der Counter nicht weiter gezählt. Im Beispiel Nr. 4 ist counter-reset richtig gesetzt, also einem Parent-Element zugewiesen. Es wird dort richtig hoch gezählt.
- Der Bezeichner (die Variable) für den automatisch generierten Zähler ist frei wählbar. Er wird ohne ein $ oder Anführungszeichen geschrieben.
- Wird für den reset und das increment eine Variable gesetzt, ohne einen Wert zuzuweisen, wird der Wert für reset auf 0, die Zählschritte auf 1 gesetzt.
Der Counter beginnt dann
bei 1 und wird jeweils um 1 hoch gezählt. Die Initialwerte sind also optional.
Startwert und auch Zählschritte können jedoch angegeben werden. Für beides sind positive als auch negative Werte möglich. - Wie für anderen durch das CSS-Attribut content generierten Content ist der Zähler nicht im Quelltext zu finden, beim Kopieren von Webseitenabschnitten wird der Counter nicht mit kopiert, eine Aufzählung geht beim Kopiervorgang also verloren.
- Funktioniert zuverlässig in allen aktuellen Browsern.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu counter-increment:
- W3C Spezifikation:
http://www.w3.org/TR/css3-content/#counter-increment
- letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
content - nächste CSS-Eigenschaft (Acc-Key: ALT + SHIFT + w):
counter-reset
Beispiele
HTML:
<div>
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
</div>
CSS:
div p:before {
content: "Nr. " counter(var1) ": ";
}
/* Hier fehlen counter-increment und counter-reset, wodurch der counter initialisiert wird. */
Beispiel Nr. 1 So sieht's aus:
eins
zwei
drei
vier
HTML:
<div class="doIncr">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
</div>
CSS:
div.doIncr p:before {
counter-increment: var2;
content: "Nr. " counter(var2) ": ";
}
/* Hier fehlt counter-reset, wodurch der counter initialisiert wird. */
Beispiel Nr. 2 So sieht's aus:
eins
zwei
drei
vier
HTML:
<div class="doIncrRes">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
</div>
CSS:
div.doIncrRes p:before {
counter-reset: var3;
counter-increment: var3;
content: "Nr. " counter(var3) ": ";
}
/* counter-reset setzt den Wert zurück, als ob er innerhalb einer Schleife stünde. Es kommt zu keinem Hoch-Zählen. */
Beispiel Nr. 3 So sieht's aus:
eins
zwei
drei
vier
HTML:
<div class="doReset">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
</div>
CSS:
div.doReset {
counter-reset: var4;
}
/* counter-reset muss einem Elternelement zugewiesen sein, damit der Wert nur einmal initialisiert wird. */
div.doReset p {
color: blue;
}
div.doReset p:before {
counter-increment: var4;
content: "Nr. " counter(var4) ": ";
}
Beispiel Nr. 4 So sieht's aus:
eins
zwei
drei
vier
HTML:
<div class="doBigSteps">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
</div>
CSS:
div.doBigSteps {
counter-reset: var5 3;
}
/* Startwert wird hier auf 3 gesetzt. */
div.doBigSteps p {
color: blue;
}
div.doBigSteps p:before {
counter-increment: var5 7;
content: "Nr. " counter(var5) ": ";
color: red;
}
/* Per counter-increment wird der Zählschritt auf 7 gesetzt. */
Beispiel Nr. 5 So sieht's aus:
eins
zwei
drei
vier
HTML:
<div class="doNeg">
<p>eins</p>
<p>zwei</p>
<p>drei</p>
<p>vier</p>
</div>
CSS:
div.doNeg {
counter-reset: var6 -5;
}
div.doNeg p {
color: blue;
}
div.doNeg p:before {
counter-increment: var6 -3;
content: "Nr. " counter(var6) ": ";
color: red;
}
/* Sowohl für Startwert als auch den Zählschritt sind negative Werte zulässig. */
Beispiel Nr. 6 So sieht's aus:
eins
zwei
drei
vier
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!