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 repräsentiert, falls vorhanden.

Die counter()-Funktion wird in der Regel innerhalb von Pseudoelementen durch die content-Eigenschaft verwendet. Theoretisch kann sie jedoch überall eingesetzt 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 an sich keine sichtbare Wirkung. Die counter()- und counters()-Funktionen machen Zähler nützlich, indem sie Entwickler-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. Dabei handelt es sich um denselben case-sensitiven Namen, der mit den Eigenschaftswerten counter-reset und counter-increment verwendet wird. Der Zählername darf nicht mit zwei Bindestrichen beginnen und darf nicht none, unset, initial, oder inherit sein.

<counter-style>

Ein <list-style-type>-Name, <@counter-style>-Name oder symbols()-Funktion, wobei ein Zählerstil-Name ein einfacher vordefinierter numeric, alphabetic oder symbolic Zählerstil, ein komplexer Langhand Ostasiatischer oder Ethiopischer vordefinierter Zählerstil oder ein anderer vordefinierter Zählerstil ist. Wird dieser weggelassen, ist der Standard-Zählerstil decimal.

Hinweis: Um die Zählerwerte bei verschachtelten 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 im Vergleich zu lower-alpha

In diesem Beispiel zeigen wir einen Zähler mit den Liststilen 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 verwenden die counter()-Funktion mit drei verschiedenen Zählerstilen, einschließlich des Standardwerts decimal. Wir haben dem Listenstil einen Abstand hinzugefügt, um Platz für die lange ::marker-Zeichenkette 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
CSS Counter Styles Level 3
# extending-css2

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch