`counters()` CSS-Funktion

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die counters() CSS Funktion ermöglicht das Kombinieren von Markierungen beim Verschachteln von Zählern. Die Funktion gibt eine Zeichenkette zurück, die die aktuellen Werte der benannten und verschachtelten Zähler, falls vorhanden, mit der bereitgestellten Zeichenkette verkettet. 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 zum innersten, und getrennt durch das angegebene <string>. Die Zähler werden im angegebenen <style> gerendert, wobei decimal der Standardwert 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

/* 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 genommen 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. Es ist derselbe case-sensible Name, der für die Eigenschaften counter-reset und counter-increment verwendet wird. Der Name darf nicht mit zwei Bindestrichen beginnen und nicht none, unset, initial oder inherit sein. Alternativ können für Inline-Einweg-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: zum Beispiel repräsentiert \000A9 das Copyright-Symbol.
<counter-style>: Ein Zählerstilname oder eine symbols() Funktion. Der Zählerstilname kann ein vordefinierter Stil wie numerisch, alphabetisch oder symbolisch sein, ein komplexer langanhaltender vordefinierter Stil wie Ostasiatisch oder Äthiopisch, oder ein anderer vordefinierter Zählerstil. Wenn weggelassen, wird der Zählerstil standardmäßig auf Dezimal gesetzt.

Der Rückgabewert ist eine Zeichenkette, die alle Werte aller Zähler im Satz der CSS-Zähler des Elements mit dem Namen <counter-name> im durch <counter-style> definierten Zählerstil enthält (oder Dezimal, wenn weggelassen). Die Rückgabezeichenkette ist von außen nach innen sortiert und wird durch das angegebene <string> zusammengefügt.

Hinweis: Informationen zu nicht-verknüpften Zählern finden Sie in der counter()-Funktion, die <string> als Parameter weglässt.

Formale Syntax

<counters()> = 
  counters( <counter-name> , <string> , <counter-style>? )  

<counter-name> = 
  <custom-ident>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<counter-style-name> = 
  <custom-ident>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed       

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Beispiele

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

Dieses Beispiel enthält zwei counters()-Funktionen: eine mit gesetztem <counter-style> und die andere mit decimal als Standardwert.

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 dezimal-vorausgehenden Nullzählwerts 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);
}