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 durch Leerzeichen getrennten Zählernamen, die als <custom-ident> mit einem optionalen <integer> Wert angegeben werden, oder das Schlüsselwort none. Sie können beliebig viele Zähler angeben, die inkrementiert werden sollen, wobei jeder Name oder Name-Zahlen-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 hinzugefügt werden soll. Wenn der Ganzzahl ein - Zeichen vorangestellt ist, wird der Wert vom Zähler abgezogen. Standardmäßig 1, wenn kein Wert angegeben ist.

none

Gibt an, dass kein Zähler erhöht oder verringert werden soll. 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

Formaler Syntax

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

Beispiele

Wert des Zählers verringern

In diesem Beispiel zeigen wir eine rückwärts zählende Zahlenfolge. Dazu nutzen wir einen Zähler, um Zahlen zu zeigen, die bei 100 beginnen und jedes Mal um 7 verringert werden.

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 counter-reset. Dann verringern wir für jedes <i> den Zähler um 7.

Um den ersten Zählerstand auf 100 zu setzen, richten wir uns an das erste <i> Element, indem wir die :first-of-type Pseudoklasse verwenden und counter-increment: none; setzen. Zusätzlich wird die content Eigenschaft im ::before Pseudoelement 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ähler-Eigenschaften: counter-set, counter-reset
• Zähler-At-Regel: @counter-style
• Zähler-Funktionen: counter(), counters()
• Verwendung von CSS-Zählern Leitfaden
• CSS-Listen und Zähler Modul
• CSS-Zählerstile Modul