html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS counter-reset property

Definition

The CSS counter-reset property resets 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 reset. If an integer is also used it specifies the reset value for each use. Default reset value is 0.

inherit - The counter-reset 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-reset 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-reset property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS counter-reset Property</title>

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

     identifier integer, inherit and none.

--> 

<style type="text/css">

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

/* 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-reset 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-reset property with the values above will look something like the following:

notepad
CSS counter-increment    << Prev          Next >>   CSS cursor

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.