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. Diese Funktion gibt einen String zurück, der die aktuellen Werte der benannten und verschachtelten Zähler, sofern vorhanden, mit dem angegebenen String verknüpft. Der dritte, optionale Parameter erlaubt die Definition des Listentyps.

Die counters()-Funktion wird in der Regel innerhalb von Pseudo-Elementen durch die content-Eigenschaft verwendet, kann theoretisch jedoch überall 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>, von außen nach innen geordnet und durch den angegebenen <string> getrennt. Die Zähler werden im <style>-Format dargestellt, das angegeben ist, und standardmäßig auf decimal gesetzt, 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 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 Verknüpfungs-<string>. Der optionale dritte Parameter ist der <counter-style>.

<counter-name>: Ein <custom-ident> zur Identifizierung der Zähler, der derselbe groß-/kleinschreibungssensitive Name ist, der für die counter-reset- und counter-increment-Eigenschaften 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- und Einmalgebrauchs-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 kodiert werden: beispielsweise repräsentiert \000A9 das Copyright-Symbol.
<counter-style>: Ein Zählerstilname oder eine symbols()-Funktion. Der Zählerstilname kann ein einfach vorkonfigurierter Stil wie numerisch, alphabetisch oder symbolisch sein, ein komplizierter ausgeschriebener Stil wie ostasiatisch oder äthiopisch, oder ein anderer vorkonfigurierter Zählerstil. Wenn er weggelassen wird, wird der Zählerstil auf decimal gesetzt.

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

Hinweis: Für Informationen über nicht verkettete 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 Standardzählwerts mit römischen Zahlen in Großbuchstaben

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

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ählwerts mit führender Null mit Kleinbuchstaben

Dieses Beispiel enthält drei counters()-Funktionen, jeweils 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