CSS - counter-increment

Description

The counter-increment property sets how much the counter increments on each occurrence of a selector. Default increment is 1.

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.counterIncrement = "chapter 2";

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>HTML tutorials</h1>
      <h2>HTML Tutorial</h2>
      <h2>XHTML Tutorial</h2>
      <h2>CSS Tutorial</h2>
      
      <h1>Scripting tutorials</h1>
      <h2>JavaScript</h2>
      <h2>VBScript</h2>
   </body>
</html>

It will produce the following result −

Previous Page Print Page Next Page