Teller reset - CSS-trucs | CSS Almanac 2025

De counter-reseteigenschap maakt automatische nummering van elementen mogelijk. Zoals een geordende lijst (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

De counter-reseteigenschap wordt gebruikt om een CSS-teller opnieuw in te stellen op een bepaalde waarde.

Het maakt deel uit van de CSS-tellermodule die deel uitmaakt van de gegenereerde inhoud, automatische nummering en de CSS2.1-specificatie vermeldt, uitgebreid in de CSS3-specificatie van de Generated and Replaceced Content Module.

Syntaxis

counter-reset: ( ?)+ | none

Waar…

is de naam van de teller die u wilt resetten
is de waarde waarop de teller moet worden gereset
none schakel de teller uit

body ( counter-reset: my-awesome-counter 0; )

Opmerking: de standaardwaarde voor het gehele getal is 0. Als er geen geheel getal achter de tellernaam staat, wordt deze gereset naar 0. Dit werkt dus zoals verwacht:

body ( counter-reset: my-awesome-counter; )

U kunt meerdere tellers tegelijk resetten met een door spaties gescheiden lijst, elk met zijn specifieke waarde als u dat wenst.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Dit wordt gereset my-awesome-counternaar 5 en my-other-counternaar de standaardwaarde: 0.

U kunt deze lijst te zien als: counter1 value1 counter2 value2 counter3 value3… . Als een waarde wordt weggelaten, is deze 0.

Demo

In de volgende demo wordt de articleteller teruggezet sectionnaar de standaardwaarde (0), die vervolgens wordt opgehoogd bij elke sectie die voorkomt en vervolgens wordt weergegeven voor sectiekoppen.