counter-increment CSS property

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 akzeptiert als Wert entweder eine Liste der durch Leerzeichen getrennten Zählernamen, angegeben als <custom-ident> mit einem optionalen <integer>-Wert, oder das Schlüsselwort none. Sie können so viele Zähler inkrementieren, wie Sie möchten, wobei jeder Name oder jedes Namens-Nummern-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 die ganze Zahl von einem --Zeichen vorangestellt wird, wird der Wert vom Zähler subtrahiert. Standardmäßig wird 1 angenommen, wenn kein Wert angegeben wird.

none

Gibt an, dass kein Zähler erhöht oder verringert werden darf. Dieser Wert kann auch verwendet werden, um alle Zähler in spezifischeren Regeln vor einer Erhöhung oder Verminderung zu bewahren. Dies ist der Standardwert der Eigenschaft.

Formale Definition

Formale Syntax

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

<counter-name> = 
  <custom-ident>  

<integer> = 
  <number-token>  

Beispiele

Verringern des Zählerwerts

In diesem Beispiel zeigen wir eine Zahlenreihe an, die rückwärts zählt. Dazu verwenden wir einen Zähler, um Zahlen beginnend bei 100 anzuzeigen und jedes Mal um 7 zu verringern.

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 die erste Zählung auf 100 zu setzen, zielen wir auf das erste <i>-Element mit 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 nicht counter-reset (oder counter-set) verwendet, um den Zähler zu erstellen und den Wert auf 100 zu setzen, wäre der sevens-Zähler trotzdem erstellt worden, aber mit einem Anfangswert 0.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Zählereigenschaften: 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