CSS - counter-reset



To make use of the CSS counter property, the first step involves its creation through the counter-reset property. This initiates the process of resetting the counter. When using the counter-reset property, counter is intitialised to zero by default.

Possible Values

  • <custom-ident> − The name of a counter. The name can be any string value.

  • <integer> − (optional) The default value to which the counter resets each time the element appears. This value can be zero, or even negative. If no integer is provided, the counter is reset to zero.

  • none − There will be no reset of counters.

Syntax

counter-reset: <counter name> <integer>  | reversed( <counter-name> ) <integer> ;

Applies to

All the HTML elements.

CSS counter-reset - <custom-ident> Value

Here is an example of counter-reset:

<html>
<head>
<style>
   body {
      counter-reset: heading;
   }    
   h1::before {
      counter-increment: heading;
      content: "Heading " counter(heading) ": ";
   }
</style>
</head>
<body>
   <h1>Introduction</h1>
   <p>This is the introduction section.</p>  
   <h1>Background</h1>
   <p>This is the background section.</p>
   <h1>Conclusion</h1>
   <p>This is the conclusion section.</p>
</body>
</html>

CSS counter-reset - <integer> Value

This program demonstrates the usage of the counter-reset property with an integer value. In this example, we set the counter-reset property on the body element to head-counter 5, which resets the value of the head-counter counter to 5.

<html>
<head>
<style>
   body {
      counter-reset: head-counter 5;
   }
   h1::before {
      counter-increment: head-counter;
      content: counter(head-counter) " -";
   }
   h2::before {
      counter-increment: head-counter;
      content: counter(head-counter) " -";
   }
   h3::before {
      counter-increment: head-counter;
      content: counter(head-counter) " -";
   }
</style>
</head>
<body>
   <h1>Heading 1</h1>
   <h2>Heading 2</h2>
   <h3>Heading 3</h3>
   <h3>Heading 3</h3>
   <h2>Heading 2</h2>
   <h1>Heading 1</h1>
</body>
</html>

CSS counter-reset - Reversing a counter

The counter-reset property takes value reversed. It is used to reverse the counter.

This works only in Firefox browser as of now.
h1 {
   counter-reset: reversed(item) ;
      /* Sets the reversed flag on the item counters.
         Sets the items to the number of elements */
    }
    p {
      counter-reset : reversed(unit) ;
      /* Sets the reversed flag on the unit counters.
      Sets the units to the number of elements */
    }

Following example demonstares this feature (Execute this example in Firefox browser):

<html>
<head>
<style>
   body {
      counter-reset: reversed(chapter);
   }
   h1::before {
      counter-increment: chapter -1;
      content: "Chapter " counter(chapter) ": ";
   }
</style>
</head>
<body>   
	<h1>Introduction</h1>
	<p>This is the introduction of the book.</p>
	<h1>Unit One</h1>
	<p>This is the first unit of the book.</p>
	<h1>Unit Two</h1>
	<p>This is the second unit of the book.</p>
    <h1>Unit Three</h1>
	<p>This is the third unit of the book.</p>
</body>
</html>
Advertisements