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 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 verknüpft. Der dritte, optionale Parameter ermöglicht die Definition des Listentyps.

Die counters()-Funktion wird im Allgemeinen innerhalb von Pseudo-Elementen über 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>, angeordnet vom äußersten bis zum innersten und getrennt durch den angegebenen <string>. Die Zähler werden im angegebenen <style> dargestellt, standardmäßig decimal, falls kein <style> angegeben ist.

Probieren Sie es aus

ol {
  counter-reset: index;
  list-style-type: none;
}

li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) " ";
}

<ol>
  <li>Mars</li>
  <li>
    Saturn
    <ol>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ol>
  </li>
  <li>
    Uranus
    <ol>
      <li>Titania</li>
    </ol>
  </li>
</ol>

Syntax

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

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

Ein Zähler hat für sich allein keine sichtbare Wirkung. Die counters()-Funktion (und die counter() Funktion) macht ihn nützlich, indem sie entwicklerdefinierten Inhalt 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 und derselbe Groß-/Kleinschreibung beachtende Name ist, der für die counter-reset und counter-increment-Eigenschaften verwendet wird. Der Name darf nicht mit zwei Bindestrichen beginnen und nicht none, unset, initial oder inherit sein. Alternativ kann 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 codiert werden: zum Beispiel repräsentiert \000A9 das Copyright-Symbol.

<counter-style>

Ein Zählerstilname oder eine symbols()-Funktion. Der Zählerstilname kann ein vordefinierter Stil sein, wie numerisch, alphabetisch oder symbolisch, ein komplexer vordefinierter Langschriftstil, wie Ostasiatisch oder Äthiopisch, oder ein anderer vordefinierter Zählerstil. Bei Auslassung 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 durch <counter-style> definierten Zählerstil (oder decimal, falls ausgelassen) enthält. Der Rückgabestring ist in der Reihenfolge vom äußersten bis zum innersten sortiert und durch den angegebenen <string> verbunden.

Hinweis: Informationen zu nicht verknüpften Zählern finden Sie in der counter()-Funktion, die den <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 Zahlen in Großbuchstaben

Dieses Beispiel umfasst zwei counters()-Funktionen: eine mit festgelegtem <counter-style> und die andere, die standardmäßig decimal ist.

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ührenden Nullen zu Kleinbuchstaben

Dieses Beispiel umfasst 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
CSS Counter Styles Level 3
# extending-css2

Browser-Kompatibilität

Siehe auch