CSS - counter-increment Property

Quiz

CSS counter-increment property increments or decrements the value of one or more CSS counters by a given value. If no specific value is given, the default incremental value is 1. The property is used in combination with counter-reset and content properties.

Syntax

counter-increment: none | id | initial | inherit;

Property Values

Value	Description
none	No counter is incremented. Default.
id number	The counter is identified by id. The number determines how many times the increment must happen on each occurence of the element. The default incremental value is 1. Negative values can be used.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Counter Increment Property

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

Counter Increment Property for Increasing Values

To have increasing values in the content, we can use the counter-increment property in combination with counter-reset and content properties. If no value is specified with the counter-reset property, then the default is 0. The default incremental value is 1. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .part1 {
         color: red;
         counter-reset: section;
      }

      .part1 h2::before {
         counter-increment: section;
         content: "Section " counter(section) ". ";
      }

      .part2 {
         color: green;
         counter-reset: part 7;
      }

      .part2 h2::before {
         counter-increment: part 2;
         content: "Chapter " counter(part) ". ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-increment property
   </h2>
   <h4>
      Increasing values
   </h4>
   <p>
      Each encounter of h1 tag increments the counter by 1,
      the initial value is 0.
   </p>
   <div class="part1">
      <h2>
         HTML
      </h2>
      <h2>
         CSS
      </h2>
      <h2>
         JAVASCRIPT
      </h2>
      <h2>
         PHP
      </h2>
      <h2>
         SQL
      </h2>
   </div>
   <p>
      Each encounter of h1 tag increments the counter by 2,
      the initial value is 7
   </p>
   <div class="part2">
      <h2>
         Abstract
      </h2>
      <h2>
         Introduction
      </h2>
      <h2>
         Table of Contents
      </h2>
      <h2>
         Content
      </h2>
      <h2>
         Conclusion
      </h2>
   </div>
</body>

</html>

Counter Increment Property for Decreasing Values

To have decreasing values in the content, we can use the counter-increment property in combination with counter-reset and content properties. If no value is specified with the counter-reset property, then the default is 0. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .part1 {
         color: blue;
         counter-reset: section;
      }

      .part1 h2::before {
         counter-increment: section -1;
         content: "Section " counter(section) ". ";
      }

      .part2 {
         color: orange;
         counter-reset: part 7;
      }

      .part2 h2::before {
         counter-increment: part -2;
         content: "Chapter " counter(part) ". ";
      }
   </style>
</head>

<body>
   <h2>
      CSS counter-increment property
   </h2>
   <h4>
      Decreasing values
   </h4>
   <p>
      Each encounter of h1 tag decrements the counter by 1,
      the initial value is 0.
   </p>
   <div class="part1">
      <h2>
         HTML
      </h2>
      <h2>
         CSS
      </h2>
      <h2>
         JAVASCRIPT
      </h2>
      <h2>
         PHP
      </h2>
      <h2>
         SQL
      </h2>
   </div>
   <p>
      Each encounter of h1 tag decrements the counter by 2,
      the initial value is 7
   </p>
   <div class="part2">
      <h2>
         Abstract
      </h2>
      <h2>
         Introduction
      </h2>
      <h2>
         Table of Contents
      </h2>
      <h2>
         Content
      </h2>
      <h2>
         Conclusion
      </h2>
   </div>
</body>

</html>

Supported Browsers

Property
counter-increment	4.0	8.0	2.0	3.1	9.6

css_reference.htm

Print Page