Tutorials Point

  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

CSS - counter-increment

previous next AddThis Social Bookmark Button



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";


This example shows a way to number chapters and sections with "Chapter 1", "1.1", "1.2", etc.

h1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Add 1 to chapter */
    counter-reset: section;      /* Set section to 0 */
h2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;

previous next Printer Friendly