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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft counter-increment können Sie Elemente mit Hilfe von CSS-Zählern durchnummerieren. So sind z.B. fortlaufende Kapitelnummerierungen möglich.

  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Folgende Angaben sind möglich:

  • none: (Standardwert) keiner der Zähler wird verändert.
  • user-ident: Der Name des Zählers, der erhöht bzw. verringert werden soll.
  • integer: Der Wert, der dem Zähler hinzugefügt werden soll. Falls nicht angegeben, wird 1 verwendet.

Sie können mit counter-increment einen Variablennamen festlegen, der dann durchgezählt wird. Durch Angabe einer oder mehrerer ganzzahliger Werte können Sie bestimmen, mit welchen Intervallen gezählt wird. Mit counter-reset können Sie den Zähler zurücksetzen.

Beachten Sie: Es können beliebig viele Zähler erhöht bzw. verringert werden, jeder durch ein Leerzeichen getrennt.

Anwendungsbeispiel[Bearbeiten]

Beispiel: Zählung von Absätzen ansehen …
p {
  counter-increment: posMarkup;	
  position: relative;
}

p::before {
  content: counter(posMarkup, decimal);
  position: absolute;
}
Der Absatz p erhält mit counter-increment die Variable posMarkup zugewiesen, deren Wert bei jedem Auftreten um den Standardwert 1 erhöht wird. (Tipp: Fügen Sie im Frickl eine 2 hinzu und aktualisieren Sie die Seite.)
Vor jeden Absatz wird nun mit ::before ein Pseudoelement erzeugt, dass mit der content-Eigenschaft die Ergebnisse der counter()-Funktion ausgibt.

verschachtelte Kapitelzählung[Bearbeiten]

Beispiel: Kapitelzählung ansehen …
    body {
      counter-reset: section;
    }

    h2 {
      counter-reset: subsection;
    }

    h2::before {
      counter-increment: section;
      content: "Band " counter(section) " - ";
      color: red;
    }

    h3::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) ": ";
      color: green;
    }

Weblinks[Bearbeiten]