CSS | counter-reset Property
The counter-reset property in CSS is used to create or reset the CSS counter for elements. This property works together with counter-increment property and the content property.
Syntax:
counter-reset = none|name number|initial|inherit;
Default Value:
- none
Property Values:
- none: It is the default value. This value does not reset the counter.
- name number: The value to reset the counter on each occurrence of the element. The default value is 0 if not specified.
- initial: It sets the counter-reset property to its default value.
- inherit: The element inherits the property from its parent element.
Example 1: This example use counter-reset property to create section.
html
<!DOCTYPE html><html> <head> <!-- CSS property to set counter-reset property --> <style> /* set chapter counter to 0*/ body { counter-reset: chapter; } .chapter:before { content: counter(chapter) ". "; display: inline; } .chapter { /* Increment the chapter counter by 1, same as counter-increment: chapter 1; */ counter-increment: chapter; /* set section counter to 0 */ counter-reset: section; font-size: 20px; font-weight: bold; } </style></head><body> <h1>GeeksforGeeks</h1> <div class = "chapter">HTML</div> <div class = "chapter">CSS</div> <div class = "chapter">PHP</div></body> </html> |
Output:
Example 2: This example use counter-reset property to create section and subsection.
html
<!DOCTYPE html><html> <head> <!-- CSS style to create counter-reset property --> <style> body { counter-reset: section; } h1 { counter-reset: category; } h1:before { counter-increment: section; content: "Section " counter(section) ". "; } h3:before { counter-increment: category; content: counter(section) "." counter(category) " "; } </style></head><body> <h1>GeeksforGeeks</h1> <h3>HTML</h3> <h3>CSS </h3> <h1>References</h1> <h3>HTML Tags</h3> <h3>CSS Properties</h3></body></html> |
Output:
Supported Browsers: The browser supported by counter-reset property are listed below:
- Google Chrome 2.0
- Edge 12.0
- Internet Explorer 8.0
- Firefox 1.0
- Safari 3.0
- Opera 9.2
Please Login to comment...