CSS - counter-reset Property

Quiz

CSS counter-reset property is used for creating a new counter or resetting an existing counter. When using the property, the counter is initialized to zero by default. The property is used in combination with counter-increment property to manage the numbering of elements.

Syntax

counter-reset: none | name number | initial | inherit;

Property Values

Value	Description
none	No counter is reset. Default.
name number	It identifies the counter by name and resets the value to be reset on each occurence of the element. The default value is 0 if not specified.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Counter Reset Property

The following examples explain the counter-reset property with different values.

Using Counter Reset for Increasing Values

To create a counter or reset an existing one with zero default value and use it for maintaining and displaying increasing values, we can use the counter-reset property in combination with counter-increment property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-reset: heading;
      }

      h1::before {
         counter-increment: heading;
         content: "Heading " counter(heading) ": ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-reset property
   </h2>
   <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>

Counter Reset Property with Integer Value

To create a counter or reset an existing one with a specific integer value and use it for maintaining and displaying increasing values, we can use the counter-reset property in combination with counter-increment property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-reset: chapter 3;
      }

      h1::before {
         counter-increment: chapter;
         content: "Chapter " counter(chapter) ": ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-reset property
   </h2>
   <h1>
      HTML
   </h1>
   <p>
      This is the HTML chapter.
   </p>
   <h1>
      CSS
   </h1>
   <p>
      This is the CSS chapter.
   </p>
   <h1>
      JAVASCRIPT
   </h1>
   <p>
      This is the JAVASCRIPT chapter.
   </p>
</body>

</html>

Using Counter Reset for Decreasing Values

To create a counter or reset an existing one with a specific integer value and use it for maintaining and displaying decreasing values, we can use the counter-reset property in combination with counter-increment property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      body {
         counter-reset: floor 4;
      }

      h1::before {
         counter-increment: floor -1;
         content: "Level " counter(floor) ": ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-reset property
   </h2>
   <h1>
      Third Floor
   </h1>
   <p>
      This is third floor.
   </p>
   <h1>
      Second Floor
   </h1>
   <p>
      This is second floor.
   </p>
   <h1>
      First Floor
   </h1>
   <p>
      This is first floor.
   </p>
</body>

</html>

Using Counter Reset for Resetting Exisiting Counter

To reset an existing counter and use it for maintaining and displaying increasing or decreasing values, we can use the counter-reset property in combination with counter-increment property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      body {
         counter-reset: section-counter;
      }

      h3 {
         counter-increment: section-counter;
      }

      h3::before {
         content: "Section " counter(section-counter) ": ";
         font-weight: bold;
      }

      .reset-counter {
         counter-reset: section-counter 9;
      }
   </style>
</head>

<body>
   <h2>
   CSS counter-reset property
   </h2>
   <h1>
      Introduction
   </h1>
   <h3>
      Overview
   </h3>
   <h3>
      Details
   </h3>

   <div class="reset-counter">
      <h1>
         Background
      </h1>
      <h3>
         History
      </h3>
      <h3>
         Context
      </h3>
   </div>

   <h1>
      Conclusion
   </h1>
   <h3>
      Summary
   </h3>
   <h3>
      Future Work
   </h3>

</body>

</html>

Supported Browsers

Property
counter-reset	4.0	8.0	2.0	3.1	9.6

css_reference.htm

Print Page