`counter-set` CSS property

Baseline 2023

Neu verfügbar

Seit December 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die counter-set CSS-Eigenschaft setzt CSS-Zähler auf dem Element auf die angegebenen Werte.

Wenn die Zähler nicht existieren, erstellt die Eigenschaft counter-set einen neuen Zähler für jeden benannten Zähler in der Liste der durch Leerzeichen getrennten Zähler- und Wertpaare. Es wird jedoch empfohlen, die CSS-Eigenschaft counter-reset zu verwenden, um einen neuen Zähler zu erstellen.

Fehlt einem benannten Zähler in der Liste ein Wert, wird der Wert des Zählers auf 0 gesetzt.

Hinweis: Der Wert des Zählers kann mithilfe der CSS-Eigenschaft counter-increment inkrementiert oder dekrementiert werden.

Probieren Sie es aus

counter-set: none;

counter-set: chapter-count 0;

counter-set: chapter-count;

counter-set: chapter-count 5;

counter-set: chapter-count -5;

<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>

#default-example {
  text-align: left;
  counter-set: chapter-count;
}

#example-element {
  background-color: #37077c;
  color: white;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counter(chapter-count) ": ";
}

Syntax

css

/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Set "my-counter" to -1 */
counter-set: my-counter -1;

/* Set "counter1" to 1, and "counter2" to 4 */
counter-set: counter1 1 counter2 4;

/* Cancel any counter that could have been set in less specific rules */
counter-set: none;

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

Die counter-set-Eigenschaft wird wie folgt spezifiziert:

Ein <custom-ident>, das den Zähler benennt, gefolgt von einem optionalen <integer>. Sie können so viele Zähler zurücksetzen wie gewünscht, wobei jeder Name oder jedes Namen-Zahl-Paar durch ein Leerzeichen getrennt wird.
Der Schlüsselwortwert none.

Werte

<custom-ident>: Der Name des zu setzenden Zählers.
<integer>: Der Wert, auf den der Zähler bei jedem Vorkommen des Elements gesetzt werden soll. Standardmäßig 0, wenn nicht angegeben. Wenn es derzeit keinen Zähler mit dem angegebenen Namen auf dem Element gibt, erstellt das Element einen neuen Zähler mit dem angegebenen Namen und einem Startwert von 0 (dieser Wert kann jedoch sofort auf einen anderen Wert gesetzt oder inkrementiert werden).
none: Es soll kein Zähler gesetzt werden. Dies kann verwendet werden, um eine weniger spezifische counter-set-Regel zu überschreiben.

Formale Definition

Anfangswert	`none`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	by computed value type

Formale Syntax

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

<counter-name> = 
  <custom-ident>  

<integer> = 
  <number-token>

Beispiele

Benannte Zähler setzen

css

h1 {
  counter-set: chapter section 1 page;
  /* Sets the chapter and page counters to 0,
     and the section counter to 1 */
}

Spezifikationen

Spezifikation
CSS Lists and Counters Module Level 3 # propdef-counter-set

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

counter-set CSS property

Help improve MDN

`counter-set` CSS property