W3docs
de
Anmelden

CSS counter-reset Eigenschaft

Die CSS counter-reset-Eigenschaft erstellt und initialisiert CSS-Zähler. Beispiele und Erklärungen mit W3Docs.

Die Eigenschaft counter-reset erstellt einen oder mehrere CSS-Zähler und setzt jeden auf einen Startwert. Trotz des Namens besteht ihre Hauptaufgabe darin, einen Zähler zu initialisieren, damit er später verwendet werden kann — sie setzt nicht einfach einen vorhandenen Zähler zurück auf null, sondern bringt den Zähler im aktuellen Gültigkeitsbereich zum Existieren.

CSS-Zähler sind Variablen, die vom Browser verwaltet werden und deren Werte durch CSS-Regeln erhöht werden können, um zu verfolgen, wie oft sie verwendet werden. Sie ermöglichen es, Abschnitte, Kapitel, Listenelemente oder beliebige wiederholte Elemente vollständig in CSS zu nummerieren, ohne Markup-Änderungen oder JavaScript.

Ein Zähler ist nur als Teil eines Trios von Eigenschaften nützlich:

  • counter-reset — erstellt den Zähler und gibt ihm einen Startwert (diese Seite).
  • counter-increment — erhöht den Wert des Zählers, normalerweise einmal pro übereinstimmendem Element.
  • content — zeigt den Wert des Zählers über die Funktion counter() oder counters() an, typischerweise innerhalb eines ::before-Pseudo-Elements.

Diese Seite behandelt die Syntax von counter-reset, wie der Zählerbereich funktioniert, die Nummerierung verschachtelter Abschnitte, die Verwendung negativer und benutzerdefinierter Startwerte sowie die Werte, die die Eigenschaft akzeptiert.

So funktioniert es

Jede counter-reset-Deklaration nimmt einen Zählernamen, den Sie selbst wählen (zum Beispiel section), gefolgt von einem optionalen ganzzahligen Startwert:

/* "section" counter created, starts at 0 */
counter-reset: section;

/* "section" counter created, starts at 5 */
counter-reset: section 5;

/* multiple counters in one declaration */
counter-reset: chapter 0 page 1;

Wenn Sie die Zahl weglassen, beginnt der Zähler bei 0. Das erste übereinstimmende Element führt dann counter-increment vor dem Lesen von content aus, sodass ein Zähler, der bei 0 beginnt und um 1 erhöht wird, beim ersten Element als 1 angezeigt wird — was normalerweise gewünscht ist.

Der Gültigkeitsbereich ist wichtig. Ein mit counter-reset erstellter Zähler ist auf das Element beschränkt, für das er deklariert wurde, sowie auf dessen Nachkommen und nachfolgende Geschwister. Genau das ermöglicht es, einen Unter-Zähler für jeden Abschnitt zurückzusetzen: Durch Angabe von counter-reset: subsection bei jedem h2 erhält jeder Abschnitt seinen eigenen neuen subsection-Zähler. Das folgende Beispiel zur verschachtelten Nummerierung basiert auf diesem Verhalten.

Anfangswertnone
Gilt fürAlle Elemente.
VererbtNein.
AnimierbarNein.
VersionCSS2
DOM-Syntaxobject.style.counterReset = "section" ;

Syntax

counter-reset: none | name number | initial | inherit;

Der name ist ein von Ihnen gewählter Bezeichner, und number ist eine optionale ganze Zahl (sie kann negativ sein). Sie können mehrere name number-Paare in einer Deklaration auflisten, um mehrere Zähler gleichzeitig zu erstellen.

Beispiel: Einen Zähler mit JavaScript setzen

counter-reset ist auch über das DOM als element.style.counterReset erreichbar. Klicken Sie auf "Try it", um den section-Zähler auf 5 zurückzusetzen, sodass die Überschriften ab 6 neu nummeriert werden.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Click the "Try it" button to set the counter-reset property:</p>
    <button onclick="myFunction()">Try it</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section 5";
      }
    </script>
  </body>
</html>
Probier es selbst »

Beispiel mit negativem Inkrement (rückwärts zählen)

Negative Zahlen sind sowohl als Startwerte als auch bei counter-increment erlaubt. Hier wird der Zähler bei 0 erstellt und das Inkrement ist -1, sodass jede Überschrift herunterzählt: -1, -2, -3, -4.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* create "my-counter", start at 0 */
        counter-reset: my-counter;
      }
      h2::before {
        /* decrease "my-counter" by 1 on each h2 */
        counter-increment: my-counter -1;
        content: "Section " counter(my-counter) ". ";
      }
    </style>
  </head>
  <body>
    <h2>HTML Tutorial</h2>
    <h2>CSS Tutorial</h2>
    <h2>JavaScript Tutorial</h2>
    <h2>PHP Tutorial</h2>
  </body>
</html>
Probier es selbst »

Beispiel mit nummerierten Abschnitten und Unterabschnitten

Dies ist die häufigste reale Verwendung von counter-reset: verschachtelte Nummerierung wie 1.1, 1.2, 2.1. Der subsection-Zähler wird bei jedem h2 zurückgesetzt, sodass jeder Abschnitt seine Unterabschnittsnummerierung ab 1 neu startet. Ohne diesen Reset pro h2 würden die Unterabschnitte über das gesamte Dokument hinweg weiter ansteigen.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        /* Set "section" to 0 */
        counter-reset: section;
      }
      h2 {
        /* Set "subsection" to 0 */
        counter-reset: subsection;
      }
      h2::before {
        counter-increment: section;
        content: "Book " counter(section) ": ";
      }
      h3::before {
        counter-increment: subsection;
        content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h2>HTML</h2>
    <h3>HTML Basics</h3>
    <h3>HTML Templates</h3>
    <h3>HTML References</h3>
    <h3>HTML Tags</h3>
    <h2>CSS</h2>
    <h3>CSS Basics</h3>
    <h3>CSS References</h3>
    <h3>CSS Advanced</h3>
    <h3>CSS Guides</h3>
    <h3>CSS Selectors</h3>
    <h3>CSS Properties</h3>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
noneZähler werden nicht erhöht.
name numberName legt den Namen des zurückzusetzenden Zählers fest. Number legt den Wert fest, auf den der Zähler bei jedem Auftreten des Elements zurückgesetzt wird. Standardmäßig 0, wenn nicht angegeben.
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.

Häufige Fallstricke

  • Allein wird nichts angezeigt. counter-reset erstellt lediglich den Zähler. Sie benötigen dennoch counter-increment, um ihn zu erhöhen, und content: counter(name), um ihn anzuzeigen. Eine Seite mit nur counter-reset zeigt keine Zahlen an.
  • counter-reset vs. counter-set. counter-reset erstellt einen Zähler im aktuellen Gültigkeitsbereich; das neuere counter-set ändert nur den Wert eines bereits vorhandenen Zählers und erstellt nie einen neuen Bereich. Verwenden Sie counter-reset, wenn die Nummerierung innerhalb eines Abschnitts neu starten soll.
  • Inkrement läuft vor der Anzeige. Da das Inkrement bei einem ::before vor dem Lesen von content stattfindet, zeigt ein Zähler, der bei 0 beginnt und um +1 erhöht wird, beim ersten Element 1 an. Starten Sie mit einem anderen Wert, wenn Sie eine andere erste Zahl benötigen.
  • Zähler werden nicht vererbt. Der Wert der Eigenschaft wird nicht vererbt, aber der Zähler selbst ist für Nachkommen und nachfolgende Geschwister durch den Gültigkeitsbereich sichtbar — das ist es, was verschachtelte Nummerierung ermöglicht.

Browser-Unterstützung

counter-reset ist Teil von CSS2 und wird in allen modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari, Edge und Opera.

Übungen

Übung
Wofür wird die CSS-Eigenschaft 'counter-reset' verwendet?
Wofür wird die CSS-Eigenschaft 'counter-reset' verwendet?
Was this page helpful?