CSS/Funktionen/counters()

Die counters()-Funktion 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..

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.
anwendbar auf	formal überall verwendbar, wo ein CSS-<string> Wert erwartet wird. Praktisch wird counter() aber nur innerhalb der content-Eigenschaft von Pseudoelementen akzeptiert.
Browsersupport	caniuse: mdn-css_types_counters

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".

Weblinks

• W3C: Outputting Counters: the counter() and counters() functions
• MDN: counters()

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.