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 selbst keine sichtbare Wirkung. Die counter() und counters() Funktionen machen Counter nützlich, indem sie Entwickler-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> zur Identifizierung des Zählers, welcher derselbe Groß- und Kleinschreibung-sensible Name ist, der mit den Eigenschaften counter-reset und counter-increment verwendet wird. Der Zählername darf nicht mit zwei Strichen 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 numerischer, alphabetischer oder symbolischer vordefinierter Zählerstil, ein komplexer langhand ostasiatischer oder äthiopischer vordefinierter Zählerstil oder ein anderer vordefinierter Zählerstil ist. Wenn weggelassen, wird der Zählerstil 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>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

Beispiele

lower-roman im Vergleich zu lower-alpha

In diesem Beispiel zeigen wir einen Zähler mit lower-roman und lower-alpha Listenstilen 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 Standardwertes dezimal. Wir haben der Liste etwas 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-Countern
• 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