Scholar Repository
Home>Manual>CSS Counter-increment Property

CSS Counter-increment Property

From http://www.w3schools.com (Copyright Refsnes Data)

CSS counter-increment Property


CSS Reference Complete CSS Reference


Definition

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

Note: If "display: none" is used you should not be able to increment the counter. If "visibility: hidden" is used you should be able to increment the counter.

Inherited: No


JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.counterIncrement="section 2"

In our HTML DOM tutorial you can find a full Style Object Reference.


Example

A way to number sections with "Section 1", "Section 2", "Section 3"etc.:

h1:before 
{
content: "Section " counter(section) " ";
/* Add 1 to section */
counter-increment: section; 
}

A way to number sections with "Section 1", "Section 3", "Section 5" etc.:

h1:before 
{
content: "Section " counter(section) " ";
/* Add 2 to section */
counter-increment: section 2; 
}

Possible Values

Value Description
none Default. No increment of the counter in the selector
identifier number The identifier defines a selector, id, or class that should increment. The number defines how much to increment. number can be a positive number,zero, or a negative number



CSS Reference Complete CSS Reference

From http://www.w3schools.com (Copyright Refsnes Data)

Home>Manual>CSS Counter-increment Property