mozilla

Revision 356219 of counter-increment

  • Revision slug: CSS/counter-increment
  • Revision title: counter-increment
  • Revision id: 356219
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef}}

Summary

The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter's value can be reset using the {{cssxref("counter-reset")}} CSS property.

  • {{Xref_cssinitial}} {{cssinitial("counter-increment")}}
  • Applies to all elements
  • {{Xref_cssinherited}} no
  • Media {{Xref_cssvisual}}
  • {{Xref_csscomputed}} as specified

Syntax

Formal syntax: {{csssyntax("counter-increment")}}
counter-increment: counter-name        /* Increment counter-name by 1 */
counter-increment: counter-name -1     /* Decrement counter-name by 1 */
counter-increment: counter1 counter2 4 /* Increment counter1 by 1, and decrement counter2 by 4 */

counter-increment: inherit

Values

<user-ident>
The name of the counter to increment.
<integer>
The value to add to the counter. Defaults to 1 if not given.
none
No counter must be incremented. This is used as the default value, or to cancel an increment in more specialized rules.

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

Examples

h1 {
  counter-increment: chapter section 2 page;
  /* Increases the value of the chapter and page counters by 1
     and the section counter by 2. */
}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Lists', '#counter-increment', 'counter-increment') }} {{ Spec2('CSS3 Lists') }} No change.
{{SpecName('CSS2.1', 'generate.html#propdef-counter-increment', 'counter-increment')}} {{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.0 (?)
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-increment</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property is used to increase the value of <a href="/en-US/docs/CSS_Counters" title="CSS_Counters">CSS Counters</a> by a given value. The counter's value can be reset using the {{cssxref("counter-reset")}} CSS property.</p>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial}}</dfn> {{cssinitial("counter-increment")}}</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>
<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-increment")}}
</pre>
<pre>
counter-increment: counter-name        /* Increment counter-name by 1 */
counter-increment: counter-name -1     /* Decrement counter-name by 1 */
counter-increment: counter1 counter2 4 /* Increment counter1 by 1, and decrement counter2 by 4 */

counter-increment: 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 increment.</dd>
  <dt>
    <code>&lt;integer&gt;</code></dt>
  <dd>
    The value to add to the counter. Defaults to 1 if not given.</dd>
  <dt>
    <code>none</code></dt>
  <dd>
    No counter must be incremented. This is used as the default value, or to cancel an increment in more specialized rules.</dd>
</dl>
<p>You may specify as many counters to increment as you want, each separated by a space.</p>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
h1 {
  counter-increment: chapter section 2 page;
  /* Increases the value of the chapter and page counters by 1
     and the section counter by 2. */
}
</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-increment', 'counter-increment') }}</td>
      <td>{{ Spec2('CSS3 Lists') }}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-increment', 'counter-increment')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>Initial definition.</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.0 (?)</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&nbsp;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-reset")}}</li>
</ul>
Revert to this revision