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 eine Zeichenkette zurück, die den aktuellen Wert des benannten Zählers darstellt, falls vorhanden.

Die counter()-Funktion wird im Allgemeinen in Pseudoelementen über die content-Eigenschaft verwendet, kann theoretisch jedoch überall dort angewendet 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 alleine keine sichtbare Wirkung. Die counter()- und counters()-Funktionen sind das, was Zähler nützlich macht, indem sie vom Entwickler definierte Zeichenketten (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, auf Groß- und Kleinschreibung achtende Name, der mit den Eigenschaften 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 einfach vordefinierter numerischer, alphabetischer oder symbolischer Zählerstil ist, ein komplexer ausgeschriebener ostasiatischer oder äthiopischer vordefinierter Zählerstil, oder ein anderer vordefinierter Zählerstil. Wenn weggelassen, ist der Zählerstil standardmäßig decimal.

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

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 lower-roman- und lower-alpha-Listentypen.

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 die counter()-Funktion dreimal.

HTML

html

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

CSS

Wir inkludieren die counter()-Funktion mit drei verschiedenen Zählerstilen, einschließlich des standardmäßigen Dezimalwerts. Wir haben Padding zur Liste 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