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 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 bereitgestellten String verbindet. Der dritte, optionale Parameter ermöglicht das Definieren des Listenstils.

Die counters()-Funktion wird in der Regel innerhalb von Pseudo-Elementen durch die content-Eigenschaft verwendet, kann theoretisch jedoch überall dort 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>, geordnet von außen nach innen und getrennt durch den angegebenen <string>. Die Zähler werden im angegebenen <style> dargestellt, wobei standardmäßig decimal verwendet wird, wenn kein <style> angegeben ist.

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 von sich aus keine sichtbare Wirkung. Die counters()-Funktion (und die counter()-Funktion) macht sie 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 Verknüpfungs-<string>. Der optionale dritte Parameter ist der <counter-style>.

<counter-name>

Ein <custom-ident>, der die Zähler identifiziert, wobei derselbe groß- und kleinschreibungssensible Name verwendet wird wie bei den Eigenschaften counter-reset und counter-increment. Der Name darf nicht mit zwei Bindestrichen beginnen und darf nicht none, unset, initial oder inherit sein. Alternativ kann für inline, einmal verwendbare 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 codiert werden: beispielsweise stellt \000A9 das Urheberrechtssymbol dar.

<counter-style>

Ein Zählerstilname oder eine symbols()-Funktion. Der Zählerstilname kann ein einfacher vordefinierter Stil wie numerisch, alphabetisch oder symbolisch sein, ein komplexer Langhandstil wie ostasiatisch oder äthiopisch, oder ein anderer vordefinierter Zählerstil. Wird er weggelassen, wird der Zählerstil standardmäßig auf decimal gesetzt.

Der Rückgabewert ist ein String, der alle Werte aller Zähler im CSS-Zählerset des Elements mit dem Namen <counter-name> im Zählerstil, der durch <counter-style> definiert ist (oder decimal, falls weggelassen), enthält. Der Rückgabestring ist von außen nach innen sortiert und wird durch den angegebenen <string> verbunden.

Hinweis: Für Informationen über nicht verknüpfte Zähler siehe die counter()-Funktion, die den <string> als Parameter weglä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 Standard-Zählerwerts mit römischen Zahlen in Großbuchstaben

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

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 des Zählerwerts mit führender Null mit Kleinbuchstaben

Dieses Beispiel umfasst drei counters()-Funktionen, jede mit verschiedenen <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
CSS Counter Styles Level 3
# extending-css2

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
counters()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch