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()-Funktion in CSS gibt einen String zurück, der den aktuellen Wert des benannten Zählers darstellt, sofern ein solcher existiert.

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

Probieren Sie es aus

.double-list {
  counter-reset: count -1;
}

.double-list li {
  counter-increment: count 2;
}

.double-list li::marker {
  content: counter(count, decimal) ") ";
}
<p>Best Dynamic Duos in Sports:</p>
<ol class="double-list">
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
</ol>

Syntax

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

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

Zähler haben von sich aus keine sichtbare Wirkung. Die counter()- und counters()-Funktionen machen Zähler nützlich, indem sie benutzerdefinierte 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. Dies ist derselbe groß-/klein-schreibungssensitive 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ählerstil ein vordefinierter numeric, alphabetic oder symbolic Zählerstil, ein komplexes Langform-Ostasiatisches oder Äthiopisches vordefiniertes Zählerstil oder ein anderer vordefinierter Zählerstil ist. Wenn weggelassen, wird der Zählerstil standardmäßig auf decimal gesetzt.

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 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

Zähleranzeige 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 dem Absatz eine Auffüllung hinzugefügt, um Platz für die lange ::marker-String zu bieten.

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

Siehe auch