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.

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