CSS Property counter-increment








The counter-increment property can increment one or more counter values.

The counter-increment property is usually used with the counter-reset property and the content property.

Ordered list is not the only elements that can be automatically numbered. With the various counter-related properties, any element can be numbered.

Summary

Initial value
none
Inherited
no
CSS Version
CSS2
JavaScript syntax
object.style.counterIncrement = "subsection";
Animatable
no

CSS Syntax

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

Property Values

none
Default value. No counters will be incremented
id number
The id sets which counter to increment. The number sets the step that the counter will increment on each occurrence.
The default increment is 1.
0 or negative values, are allowed.
If the id refers to a not-initialized counter by counter-reset,
the default initial value is 0.
initial
sets to default value
inherit
Inherits this property from its parent element




Browser compatibility

counter-increment Yes 8.0 Yes Yes Yes

Steps to create counter

To create a counter, you use the special counter-reset property and set the value to be the name you want to use for the counter, like this:

counter-reset: myCounter;

The code above initializes a counter called myCounter and sets the value to 1.

You can specify a different initial value like this:

counter-reset: myCounter 10;

If you want to define multiple counters, you simply add the names and optional initial values to the same counter-reset declaration, like this:

counter-reset: myCounter 10 othercounter;

The code above creates a counter called myCounter with an initial value of 10 and a counter called othercounter with an initial value of 1.

Then you can use the counter with the :before and :after selectors, like this:

p:before {
  content: counter(myCounter) ". ";
  counter-increment: myCounter;
}

It will include the current value of the counter before every element that the selector matches and append a period and a space after each value.

You can specify other numeric formats as well, like this:

content: counter(myCounter, lower-alpha) ". ";

You may use any of the supported values for the list-style-type property.

You increment the counter using the special counter-increment property. The value for this property is the name of the counter you want to increment, like this:

counter-increment: myCounter;

Counters are incremented by one by default, but you can specify a different increment by adding the step size you want to the declaration, like this:

counter-increment: myCounter 2;




Example

An example showing how to use counter-increment CSS property.

<!DOCTYPE HTML>
<html>
<head>
    <style>
 p:before {<!--   www  .  j  a v a2  s .  c  o m-->
      content: counter(paragraphNumber, upper-roman) ": ";
 }
 
 h1 {
      counter-reset: paragraphNumber;
 }
 
 p {
      counter-increment: paragraphNumber;
 }
    </style>
</head>
<body>
    <h1>Heading One</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
    <h1>Heading Two</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
    <h1>Heading Three</h1>
    <p>Here is a paragraph.</p>
    <p>Here is a paragraph.</p>
</body>
</html>

Click to view the demo

Example 2

The following code adds contents before counter.

<!DOCTYPE html>
<html>
<head>
<style>
body {<!--   w  w  w . j  av  a 2 s  .  co  m-->
    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>A</h1>
<h2>A</h2>
<h2>A</h2>
<h2>A</h2>
<h1>A</h1>
<h2>A</h2>
<h2>A</h2>
<h1>A</h1>
<h2>A</h2>
<h2>A</h2>

</body>
</html>

Click to view the demo