PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

CSS-Eigenschaft: counter-reset, Kategorien: Generierte Inhalte (allgemein), Generated content, automatic numbering, and lists (CSS 2.1), Generated and Replaced Content (CSS 3)

Startwert für die automatische Nummerierung

Legt den Startwert für eine automatische Nummerierung fest, bzw. setzt diesen in einer laufenden Zählung auf einen anderen Wert.

CSS-Eigenschaft: counter-reset
KurzbeschreibungWerteStandardwertKategorieHinweis
Startwert 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-reset zu beachten:

  • counter-reset ist keine eigenständige Eigenschaft. Es benötigt immer eine Angabe der CSS-Eigenschaft content, über welche "generierter Content" zur HTML-Ausspielung hinzugefügt wird.
  • In der Eigenschaft content wird die Variable über das Konstrukt counter() angesprochen und ausgespielt.
  • content muss selber mit einem der Pseudo-Attribute :before oder :after angesprochen werden, damit counter-reset greifen kann.
  • Damit die Eigenschaft funktioniert, darf counter-reset nicht dem HTML-Element selber zugewiesen werden, sondern muss in einem Eltern-Element definiert sein. In den Beispielen Nr. 1 und Nr. 2 fehlt die Angabe des counter-reset, woran die korrekte Ausspielung scheitert. Im Beispiel Nr. 3 ist die Angabe von counter-reset richtig gesetzt, es wird dort korrekt hoch gezählt.
  • Zusätzlich ist die Eigenschaft counter-increment notwendig, um den Zähler weiter zu zählen. Ohne diese Angabe bleibt der Zähler auf dem Initialwert stehen.
  • Wie im Beispiel Nr. 4 zu sehen ist, dient counter-reset nicht nur dazu, den Startwert zu setzen, sondern kann auch während des Zählens auf einen anderen Wert gesetzt werden.
  • Der Bezeichner für den automatischen Zähler ist frei wählbar, er wird ohne irgendein $ oder Anführungszeichen geschrieben.
  • Wird für counter-reset und counter-increment nur ein Bezeichner, d.h. eine Variable gesetzt, aber kein Wert angegeben, wird für counter-reset 0 als Standardwert und die Zählschritte auf 1 gesetzt. Ohne jede weitere Angabe beginnt der Counter bei 1 an und wird um 1 hoch gezählt. Die Initialwerte sind optional.
    Startwert und Zählschritte können jedoch angegeben werden. Für beides sind positive und negative Werte möglich.
  • Wie für anderen durch das CSS-Attribut content generierten Content ist auch der Zähler nicht im Quelltext zu finden, ebenfalls wird beim Kopieren von Webseitenabschnitten der Counter nicht mit kopiert. Der Einsatz ist von daher genau zu prüfen.
Browserunterstützung von counter-reset
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-reset:

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


Beispiele

HTML:

<div>
   <p>eins</p>
   <p>zwei</p>
   <p>drei</p>
   <p>vier</p>
</div>

CSS:

div p:before {
   content: "Nr. " counter(var1) ": ";
}
/* Die alleinige Angabe von content: counter() ist ohne Auswirkung. */

Beispiel Nr. 1 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: var2 5;
   content: "Nr. " counter(var2) ": ";
}
/* Die Angabe von counter-reset darf nicht dem HTML-Element zugewiesen werden, an dem der Counter greifen soll.  */

Beispiel Nr. 2 So sieht's aus:

eins

zwei

drei

vier

 

HTML:

<div class="doStart">
   <p>eins</p>
   <p>zwei</p>
   <p>drei</p>
   <p>vier</p>
</div>

CSS:

div.doStart {
   counter-reset: var3 1;
}
div.doStart p {
   color: blue;
}
div.doStart p:before {
   content: "Nr. " counter(var3) ": ";
   counter-increment: var3;
}
/* counter-reset ist hier dem umgebenden DIV zugewiesen. Es muss außerhalb des betreffenden HTML-Element stehen.
Der Startwert wird hier auf 1 gesetzt - vor der ersten Ausspielung wird der Wert allerdings schon um 1 durch das counter-increment hoch gezählt.*/

Beispiel Nr. 3 So sieht's aus:

eins

zwei

drei

vier

 

HTML:

<div class="doCount">
   <p>eins</p>
   <p>zwei</p>
   <p>drei</p>
   <p>vier</p>
   <p>fünf</p>
   <p class="doResetNow">sechs</p>
   <p>sieben</p>
   <p>acht</p>
   <p>neun</p>
   <p>zehn</p>
</div>

CSS:

div.doCount {
   counter-reset: var4;
}
/* Es wird kein Wert für die Variable gesetzt, der Default wird dieser mit 0 initialisiert. */
div.doCount p {
   color: blue;
}
div.doCount p:before {
   counter-increment: var4 2;
   content: "Nr. " counter(var4) ": ";
   color: red;
   font-weight: 700;
}
/* Der Zählschritt wird hier auf 2 gesetzt.
Generell kann man auch auf generierten Content normale CSS-Anweisungen anwenden. */
div.doCount p.doResetNow {
   counter-reset: var4 35;
}
/* Im P "sechs" wird die Variable auf einen neuen Wert gesetzt. Die Zählung basiert ab dort auf diesem Wert. */

Beispiel Nr. 4 So sieht's aus:

eins

zwei

drei

vier

fünf

sechs

sieben

acht

neun

zehn

 

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: 17. 01. 2024
Render Time: 0.032 sec.