mozilla

Revision 20551 of counter-reset

  • Revision slug: CSS/counter-reset
  • Revision title: counter-reset
  • Revision id: 20551
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Added pt locale (we have it!); 11 words added

Revision Content

{{ CSSRef() }}

Summary

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

<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: none
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

counter-reset: [<identifier> <integer>?]+ | inherit | none

Values

identifier
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.

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
CSS 2.1 {{ Spec2('CSS2.1') }}  

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

{{ languages( { "fr": "fr/CSS/counter-reset", "pl": "pl/CSS/counter-reset", "pt":"pt/CSS/counter-reset" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary">Summary</h2>
<p>The <code>counter-reset</code> <a href="/en/CSS" title="CSS">CSS</a> property is used to reset <a href="/en/CSS_Counters" title="en/CSS_Counters">CSS Counters</a> to a given value.</p>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}



]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>none</code></li> <li><dfn>Applies to:</dfn> all elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
</nobr>
<p><nobr></nobr></p><nobr>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">counter-reset: [&lt;identifier&gt; &lt;integer&gt;?]+ | inherit | none
</pre>
<h3 id="Values" name="Values">Values</h3>
<dl> <dt>identifier</dt> <dd>The name of the counter to reset.</dd> <dt>integer</dt> <dd>The value to reset the counter to on each occurrence of the element. Defaults to 0 if not given.</dd>
</dl>
<p>You may specify as many counters to reset as you want, each separated by a space.</p>
<h3 id="Examples" name="Examples">Examples</h3>
<pre>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 style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset" title="http://www.w3.org/TR/CSS21/generate.html#propdef-counter-reset">CSS 2.1</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<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/CSS_Counters" title="en/CSS_Counters">CSS Counters</a>, {{ Cssxref("counter-increment") }}</li>
</ul>
<p>{{ languages( { "fr": "fr/CSS/counter-reset", "pl": "pl/CSS/counter-reset", "pt":"pt/CSS/counter-reset" } ) }}</p></nobr>
Revert to this revision