Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

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.

CSS-Eigenschaft: counter-increment
KurzbeschreibungWerteStandardwertKategorieHinweis
Zählschritt für die automatische Nummerierung
  • identifier integer?
  • none
  • inherit
none
Allgemein:
Generierte Inhalte
CSS 2.1:
Generated content, automatic numbering, and lists
CSS 3:
Generated and Replaced Content
 

Verwandte Eigenschaften aus der Kategorie: Generierte Inhalte (allgemein), Generated content, automatic numbering, and lists (CSS 2.1), Generated and Replaced Content (CSS 3):

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.
Browserunterstützung von counter-increment
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu counter-increment:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    content


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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 16. 10. 2017
Render Time: 0.114 sec.

Browser-Marktanteile