counter-increment

Probieren Sie es aus

counter-increment: example-counter;

counter-increment: example-counter 0;

counter-increment: example-counter 5;

counter-increment: example-counter -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Counter value:</div>
</section>

#default-example {
  text-align: left;
  counter-reset: example-counter;
}

#example-element::after {
  content: counter(example-counter);
}

Syntax

/* Increases "my-counter" by 1 */
counter-increment: my-counter;

/* Decreases "my-counter" by 1 */
counter-increment: my-counter -1;

/* Increases "counter1" by 1 and decreases "counter2" by 4 */
counter-increment: counter1 counter2 -4;

/* Increases "page" by 1, "section" by 2, while "chapter" doesn't change */
counter-increment: chapter 0 section 2 page;

/* Do not increment/decrement anything: used to override less specific rules */
counter-increment: none;

/* Global values */
counter-increment: inherit;
counter-increment: initial;
counter-increment: revert;
counter-increment: revert-layer;
counter-increment: unset;

Werte

Die counter-increment Eigenschaft nimmt als Wert entweder eine Liste von leerzeichengetrennten Zählernamen, die als <custom-ident> mit einem optionalen <integer> Wert angegeben sind, oder das Schlüsselwort none. Sie können so viele Zähler zum Inkrementieren angeben, wie Sie möchten, wobei jeder Name oder Name-Wert-Paar durch ein Leerzeichen getrennt wird.

<custom-ident>

Gibt den Namen des Zählers an, der erhöht oder verringert werden soll.

<integer>

Gibt den Wert an, der zum Zähler addiert werden soll. Wenn der ganze Wert von einem - Zeichen gefolgt wird, wird der Wert vom Zähler subtrahiert. Standardmäßig 1, wenn kein Wert angegeben ist.

none

Gibt an, dass kein Zähler erhöht oder verringert werden muss. Dieser Wert kann auch verwendet werden, um zu verhindern, dass alle Zähler in spezifischeren Regeln erhöht oder verringert werden. Dies ist der Standardwert der Eigenschaft.

Formale Definition

Formale Syntax

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

Beispiele

Verringern des Zählerwertes

In diesem Beispiel zeigen wir eine Folge von Zahlen, die rückwärts zählen. Dazu verwenden wir einen Zähler, der Zahlen ab 100 anzeigt und jedes Mal um 7 verringert wird.

HTML

<div>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i
  ><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div>

CSS

Wir setzen den Anfangswert des Zählers namens sevens auf 100 mit Hilfe von counter-reset. Dann verringern wir für jedes <i> den Zähler um 7.

Um den ersten Zählwert bei 100 zu setzen, zielen wir auf das erste <i> Element, indem wir die :first-of-type Pseudo-Klasse verwenden und counter-increment: none; setzen. Zusätzlich wird die content Eigenschaft im ::before Pseudo-Element verwendet, um den Wert des Zählers mit der counter() Funktion anzuzeigen.

div {
  counter-reset: sevens 100;
}
i {
  counter-increment: sevens -7;
}
i:first-of-type {
  counter-increment: none;
}
i::before {
  content: counter(sevens);
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 300px;
  width: 200px;
}
i {
  flex: 0 0 2em;
}

Ergebnis

Hätten wir counter-reset (oder counter-set) nicht verwendet, um den Zähler zu erstellen und den Wert auf 100 zu setzen, wäre der sevens Zähler trotzdem erstellt worden, jedoch mit einem Anfangswert von 0.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Zähleigenschaften: counter-set, counter-reset
• Zählerregel: @counter-style
• Zählerfunktionen: counter(), counters()
• Verwendung von CSS-Zählern Leitfaden
• CSS-Listen und Zähler Modul
• CSS-Zählerstile Modul