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

Die counters()-Funktion wird im Allgemeinen innerhalb von Pseudoelementen durch die content-Eigenschaft verwendet, könnte 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 von außen nach innen, und getrennt durch den angegebenen <string>. Die Zähler werden im angegebenen <style> angezeigt, wobei decimal der Standard ist, wenn kein <style> angegeben wird.

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
/* 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 keinen sichtbaren Effekt. Die counters()-Funktion (und die counter()-Funktion) macht ihn nützlich, indem sie benutzerdefinierten Inhalt zurückgibt.

Werte

Die counters()-Funktion akzeptiert zwei oder drei Parameter. Der erste Parameter ist der <counter-name>. Der zweite Parameter ist der Konkatenator <string>. Der optionale dritte Parameter ist der <counter-style>.

<counter-name>

Ein <custom-ident> zur Identifizierung der Zähler, derselbe fallunterscheidende Name, 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 kann für einmalige Inline-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 mithilfe ihrer Unicode-Escape-Sequenzen kodiert werden: zum Beispiel steht \000A9 für das Copyright-Symbol.

<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 vordefinierter Langhandstil wie ostasiatisch oder äthiopisch, oder ein anderer vordefinierter Zählerstil. Wenn er weggelassen wird, ist der Standard-Zählerstil dezimal.

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 enthält (oder dezimal, falls weggelassen). Der Rückgabestring ist in der Reihenfolge von außen nach innen sortiert und wird durch den angegebenen <string> verbunden.

Hinweis: Informationen zu nicht verknüpften Zählern finden Sie in der 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 Ziffern in Großbuchstaben

Dieses Beispiel enthält zwei counters()-Funktionen: eine mit gesetzt <counter-style> und die andere, die den Standardwert 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 des Zählerwerts mit führender Null mit Kleinbuchstaben

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch