CSS/Properties/counter-reset

From W3C Wiki
< CSS‎ | Properties
Revision as of 18:14, 16 June 2011 by Hiroki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

counter-reset

The counter-reset property contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.

Description

Values [ <identifier> <integer>? ]+ | none | inherit
Initial value none
Applies to all elements
Inherited No


Values

  • <identifier>
    The name of the counter to reset.


  • <integer>
    The value to reset the counter to on each occurrence of selector. Defaults to 0.


  • inherit
    Takes the same specified value as the property for the element's parent.


Example

Example A

[style.css]

 body{
   counter-reset: chapter 0;
 }
 h1{
   counter-reset: sub-chapter 0;
 }
 h1:before{
   counter-increment: chapter;
   content: "Chapter " counter(chapter) ". ";
 }
 h2:before{
   counter-increment: sub-chapter;
   content: counter(chapter) "." counter(sub-chapter) ": ";
 }

[index.html]

<body>
  <h1>Font Properties</h1>
  <h2>font-size</h2>
  <h2>font-weight</h2>
  <h2>font-family</h2>

  <h1>Background Properies</h1>
  <h2>background-color</h2>
  <h2>background-position</h2>
  <h2>background-repeat</h2>
</body>

Csslist2 counter.png

CSS Reference

The CSS specification defines the counter-reset property in 12.4 Automatic counters and numbering.