counter-reset - HTML CSS CSS Property

HTML CSS examples for CSS Property:counter-reset

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

Description

The counter-reset CSS property is used with the counter-increment property to create auto-incrementing counters.

The following table summarizes the counter-reset Property.

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

Syntax

The syntax of the property is as follows: 


counter-reset:     [ 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 reset.
integerThe value to reset the counter on each occurrence of selector. The default reset value is 0.
none No counters will be reset. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element counter-reset property.

The example below shows the counter-reset property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS counter-reset property</title>
  <style type="text/css">
    body {<!--from w  w  w  .j  a v a2  s  .c o  m-->
      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