CSS counter-reset PropertyS2C Home « CSS counter-reset Property


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.


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.


<!DOCTYPE html> 
<!-- Our HTML/CSS for the CSS counter-reset property follows -->
<html  lang="en">
<title>CSS 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) " ";


<h1>The CSS counter-reset Property</h1>
<h2>HTML Basics</h2>
<h3>Starting Out</h3>
<h3>Basic HTML Structure</h3>
<h2>HTML Intermediate</h2>
<h3>What is XHTML</h3>
<h3>HTML Structure - Layout</h3>
<h2>HTML Advanced</h2>

How It Looks

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

counter reset

go to home page Homepage go to top of page Top