html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS counter-increment property

Definition

The CSS counter-increment property increments one or more counters set with the content CSS property.

Applies To

All elements.

Property Values

negative values are acceptable.

identifier integer - Identifies the counter to be incremented. If an integer is also used it specifies the increment value for each use. Default increment value is 1. Default starting value for counters that haven't been reset is 0.

inherit - The counter-increment properties are inherited from the parent element.

none - Any counters specified are not incremented.

Default Value

Default value is set to none.

Inheritance

The counter-increment property is NOT inherited from the parent element.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS counter-increment property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS counter-increment Property</title>

<!-- Valid values for CSS counter-increment Property are:

     identifier integer, inherit and none.

--> 

<style type="text/css">

/* Set section counter on initial entry */
body {
  counter-reset: section;
}

/* Reset lesson every time we hit a h2 tag */
h2 {
  counter-reset: lesson;
}

/* Create generated content before our h2 tags */
h2:before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

/* Increment lesson counter and generate content before our h3 tags */
h3:before {
  counter-increment: lesson;
  content: counter(section) "." counter(lesson) " ";
}

</style>

</head>
<body>
<h1>The CSS counter-increment Property</h1>
<h2>HTML4 Basics</h2>
<h3>Starting Out</h3>
<h3>Basic HTML Structure</h3>
<h3>Headings</h3>
<h2>HTML4 Intermediate</h2>
<h3>What is XHTML</h3>
<h3>More HTML Structure</h3>
<h2>HTML4 Advanced</h2>
<h3>Importing..</h3>
</body>
</html>

How It Looks

The results of using the counter-increment property with the values above will look something like the following:

notepad
CSS content    << Prev          Next >>   CSS counter-reset

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.