counters()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Die counters()-Funktion wird im Allgemeinen innerhalb von Pseudoelementen durch die content-Eigenschaft verwendet, theoretisch kann sie jedoch überall dort verwendet 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 von außen nach innen und getrennt durch das angegebene <string>. Die Zähler werden in der angegebenen <style> dargestellt, wobei decimal als Standard genommen wird, wenn keine <style> angegeben wird.

Probieren Sie es aus

Syntax

css

/* Simple usage  - style defaults to decimal */
counters(counter-name, '.');

/* changing the counter display */
counters(counter-name, '-', upper-roman)

Ein Zähler hat für sich genommen keine sichtbare Wirkung. Die counters()-Funktion (und die counter()-Funktion) macht ihn nützlich, indem sie entwicklerdefinierte Inhalte zurückgibt.

Werte

Die counters()-Funktion 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>, das die Zähler identifiziert und der gleiche, case-sensitive Name ist, der für die Eigenschaften counter-reset und counter-increment verwendet wird. Der Name darf nicht mit zwei Bindestrichen beginnen und kann nicht none, unset, initial oder inherit sein. Alternativ können für inline, einmalige Zähler die symbols()-Funktion anstelle eines benannten Zählers in Browsern, die symbols() unterstützen, verwendet werden.
<string>: Eine beliebige Anzahl von Textzeichen. Nicht-lateinische Zeichen müssen mit ihren Unicode-Escape-Sequenzen kodiert werden: Zum Beispiel stellt \000A9 das Copyright-Symbol dar.
<counter-style>: Ein Zählstilname oder eine symbols() Funktion. Der Zählstilname kann ein einfacher vordefinierter Stil wie numerisch, alphabetisch oder symbolisch sein, ein komplexer langhand-vordefinierter Stil wie Ostasiatisch oder Äthiopisch, oder ein anderer vordefinierter Zählstil. Wenn ausgelassen, ist der Standard-Zählstil dezimal.

Der Rückgabewert ist ein String, der alle Werte aller Zähler im CSS-Zählersatz des Elements mit dem Namen <counter-name> im durch <counter-style> definierten Zählstil enthält (oder dezimal, falls weggelassen). Der Rückgabestring ist sortiert in der Reihenfolge von außen nach innen, verbunden durch das angegebene <string>.

Hinweis: Informationen über nicht-konkatenierte Zähler finden Sie in der counter()-Funktion, die das <string> als Parameter auslässt.

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>       |
  <gradient>  

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

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

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

Beispiele

Vergleich des Standardzählwerts mit römischen Ziffern in Großbuchstaben

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

HTML

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

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 dezimaler Zählführung mit Kleinbuchstaben

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

HTML

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

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

Specification
CSS Lists and Counters Module Level 3 # counter-functions

Browser-Kompatibilität

BCD tables only load in the browser