CSS counter-increment PropertyS2C Home « 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 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>HTML Basics</h2>
<h3>Starting Out</h3>
<h3>Basic HTML Structure</h3>
<h3>Headings</h3>
<h2>HTML Intermediate</h2>
<h3>What is XHTML</h3>
<h3>More HTML Structure</h3>
<h2>HTML 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:

counter increment

go to home page Homepage go to top of page Top