CSS/Funktionen/counters()

Browserunterstützung
caniuse.com

Die CSS-Funktion counters() liest den Inhalt aller Instanzen eines benannten CSS Zählers aus, formatiert jeden Zählerinhalt nach den Regeln eines bestimmten Listenstils und verbindet die Einzelwerte zu einem String. Damit können Sie hierarchische Inhalte automatisch durchnummerieren. Grundlegende Erklärungen zu CSS Zählern finden Sie im verlinkten Artikel.

anwendbar auf

formal überall verwendbar, wo ein CSS-<string> Wert erwartet wird. Praktisch wird counter() aber nur innerhalb der content-Eigenschaft von Pseudoelementen akzeptiert.

Parameter

* name: Der Name des CSS Zählers, dessen Werte ausgegeben werden sollen

• join-string: Dieser String wird zwischen zwei Werte der Zählerinstanzen eingefügt.
• list-style-type: ist ein optionaler Parameter, der die Darstellung der Zählerwerte festlegt. Sie können die gleichen Angaben wie in der Eigenschaft list-style-type verwenden, auch wenn es wenig Sinn ergibt, für einen Zähler den Stil disc zu verwenden. Der Zählerstil wird für alle Instanzen des Zählers angewendet.

Beispiel

section {
   counter-reset: position;
}
p {
  counter-increment: position;	
}
p::before {
  content: counters(position, "-", lower-latin);
}

<section>
  <p>Merkur</p>
  <p>Venus</p>
  <p>Erde</p>
  <section>
    <p>Mond</p>
  </section>
</section>

Das HTML Dokument enthält geschachtelte <section>-Elemente. Je Section wird mit counter-reset ein neuer Zähler position angelegt - in einer geschachtelten Section hat counter-reset die Eigenschaft, einen neuen Zähler gleichen Namens zu erzeugen.

Vor jeden Absatz wird mit ::before ein Pseudoelement erzeugt. Diese Pseudoelemente erhalten nun mit der content-Eigenschaft einen Inhalt - ihnen werden die Ergebnisse der counters()-Funktion zugewiesen.

Die counters()-Funktion fasst die Inhalte aller Zählerinstanzen dieses Namens zusammen und findet für den Absatz „Mond“ zwei dieser Instanzen. Deswegen enthält das ::before-Pseudoelement dieses Absatzes den Inhalt "c-a".

Siehe auch

• HTML/Tutorials/Listen/Hybride Nummerierung
• Bildergalerie mit Grid Layout, deren Kindelemente sich an den verfügbaren Platz anpassen. Zur besseren Kennzeichnung der Reihenfolge im Markup wurden sie mit counter() nummeriert.

Weblinks

• W3C: Outputting Counters: the counter() and counters() functions
• MDN: counters()
• Browser-Support: caniuse.com