counters()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die counters() CSS Funktion ermöglicht das Kombinieren von Markierungen beim Schachteln von Zählern. Die Funktion gibt einen String zurück, der die aktuellen Werte der benannten und geschachtelten Zähler, falls vorhanden, mit dem angegebenen String verkettet. Der dritte, optionale Parameter erlaubt die Definition des Listenstils.

Die counters() Funktion wird generell innerhalb von Pseudo-Elementen durch die content Eigenschaft verwendet, kann theoretisch jedoch überall genutzt 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 das angegebene <string>. Die Zähler werden in dem angegebenen <style> gerendert, standardmäßig als decimal, wenn 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 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 Verkettungsstring <string>. Der optionale dritte Parameter ist der <counter-style>.

<counter-name>: Ein <custom-ident> zur Identifizierung der Zähler, derselbe case-sensitive Name, 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 kann für einmalige Inline-Zähler anstelle eines benannten Zählers die symbols() Funktion verwendet werden, in Browsern, die symbols() unterstützen.
<string>: Eine 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 sein, wie numerisch, alphabetisch oder symbolisch, ein komplexer Langstil 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 ein String, der alle Werte aller Zähler im CSS-Zählersatz des Elements, benannt <counter-name>, im durch <counter-style> definierten Stil enthält (oder Dezimal, falls weggelassen). Der Rückgabestring ist von außen nach innen sortiert, verbunden durch das angegebene <string>.

Hinweis: Informationen zu nicht verketteten Zählern finden Sie in der counter() Funktion, die das <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 Ziffern in Großbuchstaben

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

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 umfasst 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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden