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, sofern ein solcher existiert.

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

Probieren Sie es aus

Syntax

css

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

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

Zähler haben selbst keine sichtbare Wirkung. Die counter()- und counters()-Funktionen machen Zähler nützlich, indem sie von Entwicklern definierte Strings (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 und derselbe case-sensitive Name ist, wie er 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 numeric, alphabetic oder symbolic einfacher vordefinierter Zählerstil, ein komplexer ausführlicher ostasiatischer oder äthiopischer vordefinierter Zählerstil oder ein anderer vordefinierter Zählerstil ist. Wenn weggelassen, ist der Standardzählerstil decimal.

Hinweis: Um die Zählerwerte beim Verschachteln von Zählern zu verbinden, 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 verglichen mit lower-alpha

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

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

Anzeige eines Zählers mit drei Stilen

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

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 Padding zur Liste 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