counter()

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 von selbst keinen sichtbaren Effekt. Die counter() und counters() Funktionen machen Zähler nützlich, indem sie eigene 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, derselbe fallunterscheidende Name, der mit den Werten der Eigenschaften counter-reset und counter-increment verwendet wird. Der Zählername darf nicht mit zwei Bindestrichen beginnen und 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 numeric, alphabetic oder symbolic Zählerstil, ein komplexer ausgeschriebener ostasiatischer oder äthiopischer vordefinierter Zählerstil oder ein anderer vordefinierter Zählerstil ist. Wenn er weggelassen wird, ist der Standard-Zählerstil 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 verglichen mit 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 dem Standardwert decimal. Wir haben der Liste eine Auffüllung 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 generierter Inhalt Modul