CSS/Properties/counter-reset

From Web Education Community Group
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.