counter()

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 allgemein innerhalb von Pseudo-Elementen durch die content-Eigenschaft verwendet, kann theoretisch aber ü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

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

Zähler haben selbst keine sichtbare Wirkung. Die counter()- und counters()-Funktionen machen Zähler nützlich, indem sie von Entwicklern 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. 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ählerstilname ein vordefinierter numerischer, alphabetischer oder symbolischer Zählerstil sein kann, ein komplexer Langform-Ostasiatischer oder Äthiopischer vordefinierter Zählerstil oder ein anderer vordefinierter Zählerstil. Wenn dieser ausgelassen wird, ist der Standardwert des Zählerstils decimal.

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> | 
 <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 im Vergleich zu lower-alpha

In diesem Beispiel zeigen wir einen Zähler mit den Listenstilen lower-roman und lower-alpha an.

HTML

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

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

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

CSS

Wir integrieren die counter()-Funktion mit drei verschiedenen Zählerstilen, einschließlich des standardmäßigen Dezimalwertes. Wir haben der Liste einen Abstand hinzugefügt, um Platz für den langen ::marker-String zu schaffen.

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

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Zählern
• counter-reset
• counter-set
• counter-increment
• @counter-style
• CSS counters()-Funktion
• CSS-Listen und -Zähler-Modul
• CSS-Zählerstile-Modul
• CSS-generierte Inhalte-Modul