counter-increment

Description

counter-increment increases or decreases counters. If no <integer> is supplied, it defaults to 1.

ItemValue
Initial value
Inherited No.
Version CSS2
JavaScript syntax object.style.counterIncrement="subsection"
Applies to All elements.

Syntax and Property Values


counter-increment: counter-name1 [integer] ... counter-nameN [integer] |  
                   none | 
                   inherit 

The property values are listed in the following table.

Value Description
none No counters is incremented
id number The id sets which counter to increment. The number sets the value for increment. The default increment is 1. 0 or negative allowed
inherit Inherit the counter-increment property from the parent element

Example


<!DOCTYPE HTML>
<html>
<head>
    <style>
 p:before {<!--  w  w w .  j a  v a2s .co 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

The code above generates the following result.

counter-increment




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference