{"id":14035,"date":"2011-09-05T20:37:11","date_gmt":"2011-09-06T03:37:11","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14035"},"modified":"2022-09-28T10:01:01","modified_gmt":"2022-09-28T17:01:01","slug":"counter-reset","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/c\/counter-reset\/","title":{"rendered":"counter-reset"},"content":{"rendered":"\n

The counter-reset<\/code> property allows for automatic numbering of elements. Like an ordered list (<ol><\/code>) element.<\/p>\n\n\n\n

article {\n  counter-reset: section;\n}\nsection {\n  counter-increment: section;\n}\nsection h2:before {\n  content: counter(section) '. ';\n}<\/code><\/pre>\n\n\n\n
The counter-reset<\/code> property is used to reset a CSS counter to a given value.<\/p>\n\n\n\n
It is part of the CSS counter module which is part of the generated content, automatic numbering, and lists<\/a> CSS2.1 specification, extended in Generated and Replaced Content Module<\/a> CSS3 specification.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
counter-reset: [<user-ident> <integer>?]+ | none<\/integer><\/user-ident><\/code><\/pre>\n\n\n\n
Where…<\/p>\n\n\n\n
  • <user-ident><\/user-ident><\/code> is the name of the counter you want to reset<\/li>
  • <integer><\/integer><\/code> is the value to reset the counter to<\/li>
  • none<\/code> disable the counter<\/li><\/ul>\n\n\n\n
    body {\n  counter-reset: my-awesome-counter 0;\n}<\/code><\/pre>\n\n\n\n
    Note: the default value for the integer is 0. If no integer is set after the counter name, it will be reseted to 0. Thus, this works as expected:<\/p>\n\n\n\n
    body {\n  counter-reset: my-awesome-counter;\n}<\/code><\/pre>\n\n\n\n
    You can reset several counters at once with a space-separated list, each one with its specific value if you wish so.<\/p>\n\n\n\n
    body {\n  counter-reset: my-awesome-counter 5 my-other-counter;\n}<\/code><\/pre>\n\n\n\n
    This will reset my-awesome-counter<\/code> to 5 and my-other-counter<\/code> to the default value: 0.<\/p>\n\n\n\n
    You can see this list as: counter1 value1 counter2 value2 counter3 value3 ...<\/code>. If a value is omitted, it’s 0.<\/p>\n\n\n
    Demo<\/h3>\n\n\n
    In the following demo, article<\/code> resets section<\/code> counter to its default value (0), which is then incremented at each section occurrence, then displayed in front of section headings.<\/p>\n\n\n\n