counter()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die counter() CSS Funktion gibt einen String zurück, der den aktuellen Wert des benannten Zählers darstellt, wenn es einen gibt.

Die counter()-Funktion wird im Allgemeinen innerhalb von Pseudo-Elementen durch die content-Eigenschaft verwendet, kann theoretisch jedoch überall dort genutzt werden, wo ein <string>-Wert unterstützt wird.

Probieren Sie es aus

Syntax

css

/* Simple usage */
counter(counter-name);

/* changing the counter display */
counter(counter-name, upper-roman)

Zähler haben für sich genommen keine sichtbare Auswirkung. Die counter() und counters() Funktionen sind das, was Zähler nützlich macht, indem sie benutzerdefiniert definierte Zeichenfolgen (oder Bilder) zurückgeben.

Werte

Die counter() Funktion akzeptiert bis zu zwei Parameter. Der erste Parameter ist der <counter-name>. Der optionale zweite Parameter ist der <counter-style>.

<counter-name>: Ein <custom-ident>, der den Zähler identifiziert. Dies ist der gleiche, auf Groß- und Kleinschreibung achtende Name, der mit den Eigenschaftswerten counter-reset und counter-increment verwendet wird. Der Zählername darf nicht mit zwei Bindestrichen beginnen und kann nicht none, unset, initial oder inherit sein.
<counter-style>: Ein <list-style-type> Name, <@counter-style> Name oder symbols() Funktion, wobei ein Zählerstilname ein einfaches vordefiniertes numerisches, alphabetisches oder symbolisches Zählerstil ist, ein komplexer ausgeschriebener ostasiatischer oder äthiopischer vordefinierter Zählerstil oder ein anderer vordefinierter Zählerstil. Wenn weggelassen, wird der Zählerstil standardmäßig auf decimal gesetzt.

Hinweis: Um die Zählerwerte beim Verschachteln von Zählern zu verketten, verwenden Sie die counters() Funktion, die einen zusätzlichen <string> Parameter bereitstellt.

Formale Syntax

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

lower-roman im Vergleich zu lower-alpha

In diesem Beispiel zeigen wir einen Zähler mit den Listentypen lower-roman und lower-alpha an.

HTML

html

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

css

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::after {
  content:
    "[" counter(count, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

Ergebnis

Anzeigen eines Zählers mit drei Stilen

In diesem Beispiel verwenden wir dreimal die counter() Funktion.

HTML

html

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

CSS

Wir fügen die counter()-Funktion mit drei verschiedenen Zählerstilen ein, einschließlich des Standardwerts decimal. Wir haben der Liste ein Padding hinzugefügt, um Platz für den langen ::marker-String zu schaffen.

css

ol {
  counter-reset: listCounter;
  padding-left: 5em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "Item #" counter(listCounter) " is: ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}

Ergebnis

Spezifikationen

Specification
CSS Lists and Counters Module Level 3 # counter-functions

Browser-Kompatibilität

BCD tables only load in the browser