---
title: counter-reset
slug: Web/CSS/counter-reset
tags:
  - CSS
  - CSS Eigenschaft
  - CSS Liste
  - NeedsMobileBrowserCompatibility
  - Referenz
translation_of: Web/CSS/counter-reset
---
<div>{{CSSRef}}</div>

<h2 id="Übersicht">Übersicht</h2>

<p>Die <code>counter-reset</code> <a href="/de/docs/Web/CSS" title="CSS">CSS</a> Eigenschaft wird verwendet, um <a href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden" title="CSS_Counters">CSS Zähler</a> auf einen bestimmten Wert zurückzusetzen.</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<pre class="brush:css">/* Setzt 'counter-name' auf 0 */
counter-reset: counter-name;

/* Setzt 'counter-name' auf -1 */
counter-reset: counter-name -1;

/* Setzt 'counter1' auf 1 und 'counter2' auf 4 */
counter-reset: counter1 1 counter2 4;

/* Bricht alle Rücksetzungen ab, die in weniger spezifischen Regeln gesetzt würden */
counter-reset: none;

/* Globale Werte */
counter-reset: inherit;
counter-reset: initial;
counter-reset: unset;
</pre>

<h3 id="Werte">Werte</h3>

<dl>
 <dt>{{cssxref("custom-ident", "&lt;custom-ident&gt;")}}</dt>
 <dd>Der Name des Zählers, der zurückgesetzt werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben <code>a</code> bis <code>z</code>, den Zahlen <code>0</code> bis <code>9</code>, Unterstrichen (<code>_</code>), und/oder Bindestrichen (<code>-</code>). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder <code>none</code>, <code>unset</code>, <code>initial</code> oder <code>inherit</code> unabhängig von Groß- und Kleinschreibung sein.</dd>
 <dt>{{cssxref("&lt;integer&gt;")}}</dt>
 <dd>Der Wert, auf den der Zähler bei jedem Vorkommen des Elements zurückgesetzt werden soll. Falls nicht angegeben, wird <code>0</code> verwendet.</dd>
 <dt><code>none</code></dt>
 <dd>Ist ein Schlüsselwort, das angibt, dass keiner der Zähler zurückgesetzt wird. Es kann dazu verwendet werden, um <code>counter-reset</code> Werte zu verstecken, die in weniger spezifischen Regeln definiert wurden.</dd>
</dl>

<p>Es können beliebig viele Zähler zurückgesetzt werden, jeder durch ein Leerzeichen getrennt.</p>

<h3 id="Formale_Syntax">Formale Syntax</h3>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<pre class="brush:css">h1 {
  counter-reset: chapter section 1 page;
  /* Setzt den 'chapter' und 'page' Zähler auf 0
     und den 'section' Zähler auf 1. */
}
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}</td>
   <td>{{Spec2('CSS3 Lists')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>

{{Compat("css.properties.counter-reset")}}

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a class="new" href="/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden" title="CSS Counters">CSS Zähler</a></li>
 <li>{{Cssxref("counter-increment")}}</li>
 <li>{{cssxref("@counter-style")}}</li>
</ul>