counter-reset

  • Revision slug: CSS/counter-reset
  • Revision title: counter-reset
  • Revision id: 376059
  • Created:
  • Creator: JohnMcLear
  • Is current revision? No
  • Comment If there was no value the reset value would be 0, if it's chained that way it wouldn't give a counter value of 1.

Revision Content

{{CSSRef}}

Summary

The counter-reset CSS property is used to reset CSS Counters to a given value.

{{cssbox("counter-reset")}}

Syntax

Formal syntax: {{csssyntax("counter-reset")}}
counter-reset: counter-name        /* Set counter-name to 0 */
counter-reset: counter-name -1     /* Set counter-name to -1 */
counter-reset: counter1 1 counter2 4 /* Set counter1 to 1, and counter2 to 4 */

counter-reset: none                /* Cancel any reset that could have been set in less specific rules */

counter-reset: inherit

Values

<user-ident>
The name of the counter to reset.
<integer>
The value to reset the counter to on each occurrence of the element. Defaults to 0 if not given.
none
Is a keyword indicating that no counter reset is to be performed. It can be used to hide counter-reset defined in less specific rules.

You may specify as many counters to reset as you want, each separated by a space.

Examples

h1 {
  counter-reset: chapter section 1 page;
  /* Sets the chapter and page counters to 0
     and the section counter to 1. */
}

Specifications

Specification Status Comment
{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}} {{Spec2('CSS3 Lists')}} No change.
{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}} {{Spec2('CSS2.1')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 2.0 1.0 (?) 8.0 9.2 3.1 (?)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

See also

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>counter-reset</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property is used to reset <a href="/en-US/docs/CSS_Counters" title="CSS_Counters">CSS Counters</a> to a given value.</p>
<p>{{cssbox("counter-reset")}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("counter-reset")}}
</pre>
<pre>
counter-reset: counter-name        /* Set counter-name to 0 */
counter-reset: counter-name -1     /* Set counter-name to -1 */
counter-reset: counter1 1 counter2 4 /* Set counter1 to 1, and counter2 to 4 */

counter-reset: none                /* Cancel any reset that could have been set in less specific rules */

counter-reset: inherit
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>&lt;user-ident&gt;</code></dt>
  <dd>
    The name of the counter to reset.</dd>
  <dt>
    <code>&lt;integer&gt;</code></dt>
  <dd>
    The value to reset the counter to on each occurrence of the element. Defaults to <code>0</code> if not given.</dd>
  <dt>
    <code>none</code></dt>
  <dd>
    Is a keyword indicating that no counter reset is to be performed. It can be used to hide <code>counter-reset</code> defined in less specific rules.</dd>
</dl>
<p>You may specify as many counters to reset as you want, each separated by a space.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush:css">
h1 {
  counter-reset: chapter section 1 page;
  /* Sets the chapter and page counters to 0
     and the section counter to 1. */
}
</pre>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}</td>
      <td>{{Spec2('CSS3 Lists')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
  {{CompatibilityTable}}</div>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>2.0</td>
        <td>1.0 (?)</td>
        <td>8.0</td>
        <td>9.2</td>
        <td>3.1 (?)</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Counters" title="CSS/Counters">CSS Counters</a>, {{Cssxref("counter-increment")}}</li>
</ul>
Revert to this revision