CSS-Eigenschaft counter-reset

❮ Vorige Nächste ❯

Die Eigenschaft counter-reset Eigenschaft setzt einen oder mehrere CSS-Zähler auf einen bestimmten Wert zurück. Diese Eigenschaft wird in der Regel zusammen mit den Eigenschaften content und counter-increment verwendet. Die Eigenschaft counter-reset wird mit zwei Werten angegeben: none und id numbers. "None" ist der Standardwert dieser Eigenschaft. Negative Werte sind erlaubt.

Anfangswert	none
Gilt für	Alle Elemente
Geerbt	Nein
Animierbar	Nein
Version	CSS2
DOM Syntax	object.style.counterReset = "section" ;

Syntax

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

Klicken Sie auf die Schaltfläche "Jetzt testen", um die Eigenschaft counter-reset einzustellen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      h2::before {
      counter-increment: section;
      content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Klicken Sie auf die Schaltfläche "Jetzt testen", um die Eigenschaft counter-reset einzustellen:</p>
    <button onclick="myFunction()">Jetzt testen</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section";
      }
    </script>
  </body>
</html>

Versuch es selber!

Werte

Wert	Beschreibung
none	Die Zähler werden nicht inkrementiert.
name number	Name definiert den Namen des Zählers, der zurückgesetzt werden soll. Number definiert den Wert, auf den der Zähler bei jedem Auftreten des Elements zurückgesetzt werden soll. Standardwert ist 0, wenn nicht angegeben.
initial	Es setzt die Eigenschaft auf seinen Standardwert.
inherit	Es erbt die Eigenschaft von ihrem übergeordneten Element.