counter-reset

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

<custom-ident>

Gibt den zu erstellenden und initialisierenden Counternamen im <custom-ident>-Format an. Die reversed()-Funktionsnotation kann verwendet werden, um den Counter als umgekehrt zu markieren.

<integer>

Der Anfangswert, der für den neu erstellten Counter festgelegt werden soll. Standardmäßig 0, wenn nicht angegeben.

none

Gibt an, dass keine Counter-Initialisierung 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 unterstützenden Browsern, umgekehrte Counter erstellen. Sie können mehrere reguläre und umgekehrte Counter erstellen, die jeweils durch ein Leerzeichen getrennt sind. Counter können ein eigenständiger Name oder ein leerzeichengetrenntes Name-Wert-Paar sein.

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

Die Standard-Anfangswerte sowohl der regulären als auch der umgekehrten Counter machen es einfach, die beiden gängigsten Nummerierungsmuster zu implementieren: das Hochzählen von eins bis zur Anzahl der Elemente und das Herunterzählen von der Anzahl der Elemente bis eins. Indem Sie einen Counter-Wert für einen benannten Counter einschließen, kann Ihr Counter ab einem ganzzahligen Wert hoch- oder herunterzählen.

Regelmäßige Counter haben standardmäßig 0, wenn kein Zurücksetzungswert angegeben wird. Standardmäßig erhöhen sich reguläre Counter 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;
}

Beim Erstellen umgekehrter Counter ohne Wert beginnt der Counter mit einem Wert, der der Anzahl der Elemente im Satz entspricht, und zählt herunter, sodass das letzte Element im Satz 1 ist. Standardmäßig verringern sich umgekehrte Counter 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 Counter, die ihre Nummerierung steuern. Diese Counter erhöhen oder verringern sich automatisch um eins mit jedem Listenelement. Die counter-reset Eigenschaft kann verwendet werden, um die list-item Counter zurückzusetzen. Wie bei anderen Countern können Sie den Standarderhöhungswert für list-item Counter mit 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 Counter festzulegen.

HTML

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

CSS

Mithilfe von counter-reset setzen wir den impliziten list-item Counter auf einen anderen Wert als den Standardwert 1:

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

Ergebnis

Mit counter-reset setzen wir den impliziten list-item Counter so, dass jedes ol bei 3 zu zählen beginnt. Das erste Element würde dann mit 4 nummeriert, das zweite mit 5, etc., ähnlich der Wirkung von <ol start="4"> in HTML.

Im folgenden Beispiel haben wir einen umgekehrten Counter namens 'priority' deklariert. Der Counter 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 Ausgabeergebnis werden die Elemente in umgekehrter Reihenfolge von 5 bis 1 nummeriert. Beachten Sie im Code, dass wir den Anfangswert des Counters nicht angegeben haben. Der Browser berechnet den Anfangswert zur Layout-Zeit automatisch anhand des Counter-Increment-Werts.

• Verwendung von CSS-Countern Leitfaden
• counter-increment Eigenschaft
• counter-set Eigenschaft
• @counter-style At-Regel
• counter() und counters() Funktionen
• content Eigenschaft
• ::marker Pseudo-Klasse
• CSS-Listen und Counter Modul
• CSS-Counterstile Modul