CSS - counter-reset
Advertisements
Description
The counter-reset property sets a named counter to a specific value.
Possible Values
name − The name of a counter. The name can be any string value.
integer − Defines an increment for the named counter each time the element appears in the document. This increment can be zero, or even negative. If no integer is provided, the counter is incremented by one.
none − No increment is performed.
Applies to
All the HTML elements.
DOM Syntax
object.style.counterReset = "section 1";
Example
This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.
Live Demo
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1> Tutorialspoint.com</h1>
<h2> Tutorialspoint.com</h2>
<h2> Tutorialspoint.com</h2>
<h2> Tutorialspoint.com</h2>
<h2> Tutorialspoint.com</h2>
</body>
</html>
It will produce the following result −
The 'counter-reset' property follows the cascading rules. Thus, due to cascading, the following style sheet will only reset 'imagenum' −
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
To reset both counters, they have to be specified together −
h1 { counter-reset: section -1 imagenum 99 }
Advertisements
