CSS/Eigenschaften/generierter Inhalt/Nummerierung/counter-reset

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft counter-reset können Sie Zähler starten oder zurücksetzen. Diese Zähler können dann z.B. fortlaufende Kapitelnummerierungen erzeugen.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • none: (Standardwert) Keiner der Zähler wird verändert.
  • Name: Der Name des Zählers, der zurückgesetzt, bzw. gestartet werden soll.
  • Nummer: Der Wert, auf den der Zähler zurückgesetzt werden soll. Falls nicht angegeben, wird 0 verwendet.
  • initial: wird auf Standardwert zurückgesetzt
  • inherit: Einstellungen werden vom Elternelement übernommen

Anwendungsbeispiel[Bearbeiten]

Beispiel: Zählung von Absätzen ansehen …
body {
  counter-reset: posMarkup 0;  
}  

p {
  position: relative;
}

p::before {
  counter-increment: posMarkup;	
  content: counter(posMarkup, upper-roman);
  position: absolute;
}
Das body-Element erhält mit counter-reset: posMarkup 0; eine Festlegung für einen ZählerposMarkup, der bei 0 beginnt und für die ganze Webseite gilt.

Der Absatz p erhält nun mit ::before ein Pseudoelement. Die Erhöhung des Zählwerts durch counter-increment findet nun nicht mehr im Absatz, sondern gleich im Pseudoelelement statt.

Über content werden die Ergebnisse der counter()-Funktion ausgegeben. Dabei wird hier zusätzlich zum Namen der list-style-type upper-roman angegeben, sodass anstelle des Standardwerts decimal mit Dezimalzählung hier römische Ziffern verwendet werden.

Weblinks[Bearbeiten]