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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
counter()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch