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 entweder eine Liste von durch Leerzeichen getrennten Zählernamen als <custom-ident> mit einem optionalen <integer> Wert oder das Schlüsselwort none als Wert an. Sie können so viele Zähler angeben, wie Sie inkrementieren möchten, wobei jeder Name oder Name-Wert-Paar durch ein Leerzeichen getrennt ist.

<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 subtrahiert. Standardmäßig wird 1 verwendet, wenn kein Wert angegeben ist.

none

Bedeutet, 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 Zahlenfolge, die rückwärts zählt. Dazu verwenden wir einen Zähler, um Zahlen ab 100 anzuzeigen, die 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 mithilfe von counter-reset. Dann verringern wir für jedes <i> den Zähler um 7.

Um den ersten Zähler auf 100 zu setzen, zielen wir auf das erste <i> Element mittels der :first-of-type Pseudo-Klasse und setzen counter-increment: none;. 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ählereigenschaften: counter-set, counter-reset
• Counter-At-Regel: @counter-style
• Counter-Funktionen: counter(), counters()
• Verwendung von CSS-Zählern Leitfaden
• CSS-Listen und Zähler Modul
• CSS-Zählerstile Modul