`counter()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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 allgemein zusammen mit Pseudo-Elementen durch die content-Eigenschaft verwendet, kann theoretisch jedoch überall dort eingesetzt 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 für sich genommen keine sichtbare Wirkung. Die counter()- und counters()-Funktionen machen Zähler nützlich, indem sie vom Entwickler definierte Zeichenfolgen (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, mit demselben von der Groß-/Kleinschreibung abhängigen Namen, der bei den counter-reset- und counter-increment-Eigenschaften 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 festgelegter numeric, alphabetic oder symbolic Zählerstil, ein komplexer langjähriger ostasiatischer oder äthiopischer Zählerstil oder ein anderer vordefinierter Zählerstil ist. Wenn weggelassen, ist der standardmäßige Zä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 bietet.

Formale Syntax

<counter()> = 
  counter( <counter-name> , <counter-style>? )  

<counter-name> = 
  <custom-ident>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<counter-style-name> = 
  <custom-ident>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Beispiele

lower-roman verglichen mit lower-alpha

In diesem Beispiel zeigen wir einen Zähler mit den lower-roman- und lower-alpha-Listenstilen 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

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 verwenden die counter()-Funktion mit drei verschiedenen Zählerstilen, einschließlich des standardmäßigen Dezimalwertes. Wir haben Padding zu der 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) "]";
}