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 the 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.
<!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.
<!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
CSS counter-reset Property – FAQs
What does the counter-reset property do in CSS?
The counter-reset property in CSS creates or resets a counter to a specified value. It’s typically used alongside the counter-increment and content properties to generate automatic numbering or bullet points in elements like lists or sections.
How do I reset a counter to start from 1?
You can reset a counter to start from 1 using: counter-reset: section 1;. This initializes the counter named “section” at 1, so it begins counting from there.
Can I reset multiple counters with counter-reset?
Yes, you can reset multiple counters by separating them with spaces. For example: counter-reset: section 1 sub-section 1; resets both “section” and “sub-section” counters to 1.
How does counter-reset work with nested counters?
In nested counters, you can reset the parent counter and start a child counter within it. For example, using counter-reset on the parent element allows child elements to increment based on the parent counter.
What is the default value of counter-reset?
The default value of counter-reset is none, meaning no counter is created or reset unless specified.
