The cover of The Complete Idiot's Guide to Create a Web Page The Complete Idiot's Style Sheets Reference

| Index | Current Category: Generated Content |
| Previous Style: counter-increment | Next Style: cue |


counter-reset

Resets a counter to 0 (or some other specified value).

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported
Notes:
  • This property can only be used within a STYLE block or an external style sheet. You can't use it as an inline style.
  • If you want the generated content to appear before the current element, add :before after the name of the tag (see the example).
  • If you want the generated content to appear after the current element, add :after after the name of the tag.

See Also:

content, counter-increment

Possible Values:

name
The name of the counter to reset.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later 3 and later 4 and later

Notes:
  • By default, the counter is reset to 0. If you want to rest the counter to another value, add the number to this value, like so:

    H2:before {counter-reset: subsection 1}

none
The counter is not reset.

Support:

W3C StandardInternet ExplorerNetscape Navigator
CSS2 and later Not supported Not supported

Example:
The following style sheet keeps track of two counters named section and subsection. The section counter is associated with the <H1> heading. Before each <H1> heading, the counter is incremented, the string "Section " and the counter's current value are written using the content property, and the subsection counter is reset to 0.  Similarly, the subsection counter is associated with the <H2> heading. Before each <H2> heading, the counter is incremented, and both the current section number and the string "Subection " with the counter's current value are written using the content property.
<STYLE TYPE="text/css">
<!--
H1:before {content: "Section " counter(section);
         counter-increment: section;
         counter-reset: subsection}

H2:before {content: "Section " counter(section) ", Subsection " counter(subsection);
         counter-increment: subsection}
-->
</STYLE>

| Index | Current Category: Generated Content |
| Previous Style: counter-increment | Next Style: cue |