counters()

Die counters() CSS-Funktion ermöglicht das Kombinieren von Markierungen beim Verschachteln von Zählern. Die Funktion gibt einen String zurück, der die aktuellen Werte der benannten und verschachtelten Zähler, falls vorhanden, mit dem angegebenen String verkettet. Der dritte, optionale Parameter ermöglicht die Definition des Listentyps.

Die counters()-Funktion wird in der Regel innerhalb von Pseudo-Elementen über die content-Eigenschaft verwendet, kann theoretisch aber überall eingesetzt werden, wo ein <string>-Wert unterstützt wird.

Die counters()-Funktion hat zwei Formen: counters(<name>, <string>) und counters(<name>, <string>, <style>). Der generierte Text ist der Wert aller Zähler mit dem angegebenen <name>, angeordnet vom äußersten zum innersten und getrennt durch den angegebenen <string>. Die Zähler werden im angegebenen <style> dargestellt, wobei decimal der Standardstil ist, falls kein <style> angegeben ist.

Probieren Sie es aus

ol {
 counter-reset: index;
 list-style-type: none;
}
li::before {
 counter-increment: index;
 content: counters(index, ".", decimal) " ";
}

<ol>
 <li>Mars</li>
 <li>
 Saturn
 <ol>
 <li>Mimas</li>
 <li>Enceladus</li>
 <li>
 <ol>
 <li>Voyager</li>
 <li>Cassini</li>
 </ol>
 </li>
 <li>Tethys</li>
 </ol>
 </li>
 <li>
 Uranus
 <ol>
 <li>Titania</li>
 </ol>
 </li>
</ol>

Syntax

/* Basic usage - style defaults to decimal */
counters(counter-name, '.');
/* changing the counter display */
counters(counter-name, '-', upper-roman)

Ein Zähler hat von sich aus keine sichtbare Wirkung. Die counters()-Funktion (und die counter()-Funktion) macht ihn nützlich, indem sie benutzerdefinierten Inhalt zurückgibt.

Werte

Die Funktion counters() akzeptiert zwei oder drei Parameter. Der erste Parameter ist der <counter-name>. Der zweite Parameter ist der Verkettungs-<string>. Der optionale dritte Parameter ist der <counter-style>.

<counter-name>

Ein <custom-ident>, der die Zähler identifiziert. Dies ist der gleiche, auf Groß- und Kleinschreibung achtende Name, der für die Eigenschaften counter-reset und counter-increment verwendet wird. Der Name darf nicht mit zwei Bindestrichen beginnen und nicht none, unset, initial oder inherit sein. Alternativ kann für einmalige, inline genutzte Zähler die symbols()-Funktion anstelle eines benannten Zählers in Browsern, die symbols() unterstützen, verwendet werden.

<string>

Beliebige Anzahl von Textzeichen. Nicht-lateinische Zeichen müssen mit ihren Unicode-Escape-Sequenzen kodiert werden: zum Beispiel repräsentiert 000円A9 das Copyright-Symbol.

<counter-style>

Ein Zählerstilname oder eine symbols()-Funktion. Der Zählerstilname kann ein vordefinierter Stil wie numerisch, alphabetisch oder symbolisch sein, ein komplexer, vordefinierter Langhandstil wie Ostasiatisch oder Äthiopisch, oder ein anderer vordefinierter Zählerstil. Wenn er weggelassen wird, ist der Standardstil dezimal.

Der Rückgabewert ist ein String, der alle Werte aller Zähler im CSS-Zählerset des Elements mit dem Namen <counter-name> im durch <counter-style> definierten Zählerstil (oder dezimal, wenn weggelassen) enthält. Der Rückgabestring wird in der Reihenfolge vom äußersten zum innersten sortiert und durch den angegebenen <string> verbunden.

Formale Syntax

<counters()> = 
 counters( <counter-name> , <string> , <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

Vergleich von Standardzählerwerten mit römischen Großbuchstaben

Dieses Beispiel enthält zwei counters()-Funktionen: eine mit festgelegtem <counter-style> und die andere standardmäßig auf decimal.

HTML

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

CSS

ol {
 counter-reset: listCounter;
}
li {
 counter-increment: listCounter;
}
li::marker {
 content:
 counters(listCounter, ".", upper-roman) ") ";
}
li::before {
 content:
 counters(listCounter, ".") " == "
 counters(listCounter, ".", lower-roman);
}

Ergebnis

Vergleich von Zählerwerten mit führender Null und Kleinbuchstaben

Dieses Beispiel enthält drei counters()-Funktionen, jede mit unterschiedlichen <string>- und <counter-style>-Werten.

HTML

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

CSS

ol {
 counter-reset: count;
}
li {
 counter-increment: count;
}
li::marker {
 content:
 counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
 content:
 counters(count, "~", upper-alpha) " == "
 counters(count, "*", lower-alpha);
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Zählern
• counter-set-Eigenschaft
• counter-reset-Eigenschaft
• counter-increment-Eigenschaft
• @counter-style-Regel
• CSS counter()-Funktion
• ::marker-Pseudo-Element
• CSS-Listen und Zähler-Modul
• CSS-Zählerstile-Modul
• CSS generierter Inhalt-Modul