counter-increment - HTML CSS CSS Property

HTML CSS examples for CSS Property:counter-increment

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. counter-increment

Description

The counter-increment CSS property increments one or more counter values.

The following table summarizes the counter-increment Property.

Item Value
Default value: none
Applies to:All elements
Inherited: No
Animatable: No.

Syntax

The syntax of the property is as follows: 


counter-increment:     [ identifier integer ]1 or more pairs | none | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
identifier The name of the counter to increment.
integerThe value to add to the counter. The default increment is '1'. Zero or negative values are allowed.
none No counters will be incremented. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element direction property.

The example below shows the counter-increment property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS counter-increment property</title>
  <style type="text/css">
    body {<!--from   w  w  w  .j av  a  2s. c om-->
      counter-reset: section;
    }
    h1 {
      counter-reset: category;
    }
    h1:before {
      counter-increment: section;
      content: "Section " counter(section) ". ";
    }
    h2:before {
      counter-increment: category;
      content: counter(section) "." counter(category) " ";
    }
    </style>
 </head>
 <body>
  <h1>Tutorials</h1>
  <h2>HTML Tutorial</h2>
  <h2>CSS Tutorial</h2>
  <h1>References</h1>
  <h2>HTML Tags</h2>
  <h2>CSS Properties</h2>
 </body>
</html>

Related Tutorials