counter-reset

Die counter-reset Eigenschaft akzeptiert eine Liste von einem oder mehreren durch Leerzeichen getrennten Zählernamen oder das Schlüsselwort none. Für Zählernamen verwenden reguläre Zähler das Format <counter-name>, und umgekehrte Zähler verwenden reversed(<counter-name>), wobei <counter-name> ein <custom-ident> oder list-item für den integrierten <ol> Zähler ist. Optional kann jedem Zählernamen ein <integer> folgen, um seinen Anfangswert festzulegen.

<custom-ident>

Spezifiziert den zu erstellenden und zu initialisierenden Zählernamen im <custom-ident> Format. Die reversed() Funktionsnotation kann verwendet werden, um den Zähler als umgekehrt zu kennzeichnen.

<integer>

Der Anfangswert, der dem neu erstellten Zähler zugewiesen wird. Standardmäßig 0, wenn nicht angegeben.

none

Gibt an, dass keine Zählerinitialisierung erfolgen soll. Dieser Wert ist nützlich, um counter-reset Werte in weniger spezifischen Regeln zu überschreiben.

Die counter-reset Eigenschaft kann sowohl reguläre als auch, in Browsern, die diese unterstützen, umgekehrte Zähler erstellen. Sie können mehrere reguläre und umgekehrte Zähler erstellen, die jeweils durch ein Leerzeichen getrennt sind. Zähler können ein eigenständiger Name oder ein durch Leerzeichen getrenntes Name-Wert-Paar sein.

Das Setzen von counter-increment: none auf einen Selektor mit höherer Spezifität überschreibt die Erstellung des benannten Zählers, der auf Selektoren mit niedrigerer Spezifität festgelegt ist.

Die Standardanfangswerte sowohl für reguläre als auch für umgekehrte Zähler erleichtern die Umsetzung der beiden gängigsten Nummerierungsmuster: Zählen von eins bis zur Anzahl der Elemente und Herunterzählen von der Anzahl der Elemente bis eins. Durch die Angabe eines Zählerwertes für einen benannten Zähler kann Ihr Zähler aufwärts oder abwärts zählen, beginnend bei einem ganzzahligen Wert.

Reguläre Zähler haben standardmäßig den Wert 0, wenn kein Rücksetz-Wert angegeben wird. Standardmäßig inkrementieren reguläre Zähler um eins, was mit der counter-increment Eigenschaft angepasst werden kann.

h1 {
  /* Create the counters "chapter" and "page" and set to initial default value.
     Create the counter "section" and set to "4". */
  counter-reset: chapter section 4 page;
}

Wenn umgekehrte Zähler ohne Wert erstellt werden, startet der Zähler mit dem Wert, der der Anzahl der Elemente im Set entspricht, und zählt so herunter, dass das letzte Element im Set 1 ist. Standardmäßig dekrementieren umgekehrte Zähler um eins; dies kann ebenfalls mit der counter-increment Eigenschaft geändert werden.

h1 {
  /* Create reversed counters "chapter" and "section".
      Set "chapter" as the number of elements and "section" as "10".
      Create the counter "pages" with the initial default value. */
  counter-reset: reversed(chapter) reversed(section) 10 pages;
}

Geordnete Listen (<ol>) verfügen über eingebaute list-item Zähler, die deren Nummerierung steuern. Diese Zähler erhöhen oder verringern sich automatisch um eins bei jedem Listenelement. Die counter-reset Eigenschaft kann verwendet werden, um die list-item Zähler zurückzusetzen. Wie bei anderen Zählern können Sie den Standardinkrementwert für list-item Zähler durch die Verwendung der counter-increment Eigenschaft überschreiben.

counter-reset = 
  [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+  |
  none                                                

<reversed-counter-name> = 
  reversed( <counter-name> )  

In diesem Beispiel wird die counter-reset Eigenschaft verwendet, um einen Startwert für einen impliziten list-item Zähler festzulegen.

HTML

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ol>

CSS

Mit counter-reset setzen wir den impliziten list-item Zähler, um mit einem anderen Wert als dem Standardwert 1 zu beginnen:

ol {
  counter-reset: list-item 3;
}

Ergebnis

Mit counter-reset setzen wir den impliziten list-item Zähler so, dass in jedem ol ab 3 gezählt wird. Dann würde das erste Element mit 4 nummeriert, das zweite mit 5 usw., ähnlich dem Effekt von <ol start="4"> im HTML.

Im folgenden Beispiel haben wir einen umgekehrten Zähler namens 'priority' deklariert. Der Zähler wird verwendet, um fünf Aufgaben zu nummerieren.

<ul class="stack">
  <li>Task A</li>
  <li>Task B</li>
  <li>Task C</li>
  <li>Task D</li>
  <li>Task E</li>
</ul>

@supports not (counter-reset: reversed(priority)) {
  .stack {
    display: none;
  }
  body::after {
    content: "Your browser doesn't support the reversed counters yet.";
  }
}

li::before {
  content: counter(priority) ". ";
  counter-increment: priority -1;
}

.stack {
  counter-reset: reversed(priority);
  list-style: none;
}

Im Ergebnis werden die Elemente in umgekehrter Reihenfolge von 5 bis 1 nummeriert. Beachten Sie, dass wir im Code keinen Anfangswert des Zählers angegeben haben. Der Browser berechnet den Anfangswert automatisch zur Laufzeit unter Verwendung des Zählerinkrementwertes.

• Verwendung von CSS-Zählern Leitfaden
• counter-increment Eigenschaft
• counter-set Eigenschaft
• @counter-style At-Regel
• counter() und counters() Funktionen
• content Eigenschaft
• ::marker Pseudo-Klasse
• CSS Listen und Zähler Modul
• CSS Zählerstile Modul