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 Verschachteln von Zählern. Die Funktion gibt eine Zeichenfolge zurück, die die aktuellen Werte der benannten und verschachtelten Zähler, falls vorhanden, mit der bereitgestellten Zeichenfolge verknüpft. Der dritte, optionale Parameter ermöglicht die Definition des Listentyps.

Die counters()-Funktion wird generell innerhalb von Pseudo-Elementen durch die content Eigenschaft verwendet, kann theoretisch aber ü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 die angegebene <string>. Die Zähler werden im <style> dargestellt, das angegeben ist, und standardmäßig 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 an sich keinen sichtbaren Effekt. 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 Konkatenator <string>. Der optionale dritte Parameter ist der <counter-style>.

<counter-name>: Ein <custom-ident> zur Identifizierung der Zähler, derselbe groß-/klein-geschriebene 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 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ähler-Stil-Name oder eine symbols() Funktion. Der Zähler-Stil-Name kann ein vordefinierter Stil wie numerisch, alphabetisch oder symbolisch sein, ein komplexer vordefinierter Stil wie ostasiatisch oder äthiopisch, oder ein anderer vordefinierter Zähler-Stil. Wenn ausgelassen, ist der Standard für den Zähler-Stil dezimal.

Der Rückgabewert ist eine Zeichenfolge, die alle Werte aller Zähler im CSS-Zählersatz des Elements mit dem Namen <counter-name> im durch <counter-style> definierten Zähler-Stil (oder dezimal, falls weggelassen) enthält. Die Rückgabezeichenfolge ist in der Reihenfolge vom äußersten zum innersten sortiert und wird durch die angegebene <string> verbunden.

Hinweis: Für Informationen über nicht verkettete Zähler sehen Sie sich die counter() Funktion an, die die <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>           |
  <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ählwertes mit römischen Zahlen in Großbuchstaben

Dieses Beispiel enthält zwei counters()-Funktionen: eine mit gesetztem <counter-style> und eine andere, die auf decimal zurückfällt.

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ählwertes 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

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