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)

Counter haben für sich genommen keine sichtbare Auswirkung. Die counter() und counters() Funktionen machen Counter dadurch nützlich, dass sie entwicklerdefinierte 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> zur Identifizierung des Counters, der denselben, auf Groß- und Kleinschreibung achtenden Namen verwendet, wie er auch bei den Eigenschaftswerten counter-reset und counter-increment benutzt wird. Der Countername 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 Counterstil ein vordefinierter numerischer, alphabetischer oder symbolischer Counterstil oder ein komplexer Langformstil für ostasiatische oder äthiopische Zählungen oder ein anderer vordefinierter Counterstil ist. Wenn weggelassen, wird der Counter-Stil standardmäßig auf decimal gesetzt.

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 mit lower-alpha

In diesem Beispiel zeigen wir einen Counter mit den Listendarstellungen lower-roman und lower-alpha.

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 Counters mit drei Stilen

In diesem Beispiel verwenden wir die counter() Funktion dreimal.

HTML

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

CSS

Wir nutzen die counter() Funktion mit drei verschiedenen Counter-Stilen, einschließlich des standardmäßigen Dezimalwerts. Wir haben Padding zur Liste 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-Countern
• counter-reset
• counter-set
• counter-increment
• @counter-style
• CSS counters() Funktion
• CSS Listen und Counter Modul
• CSS Counter-Stile Modul
• CSS generierter Inhalt Modul