CSS-Eigenschaft counter-increment

Die Eigenschaft counter-increment definiert, wie stark die Werte der Zähler erhöht oder verringert werden sollen. Diese Eigenschaft wird zusammen mit den Eigenschaften content und counter-reset verwendet.

Die Eigenschaft counter-increment wird durch zwei Werte angegeben: none und id numbers. "None" ist der Standardwert dieser Eigenschaft. Es erlaubt die Verwendung negativer Werte im Falle des Wertes "id number". Die Standardeinstellung ist 1. Wenn counter id nicht durch counter-reset initialisiert wird, ist der Standardwert 0.

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

Syntax

counter-increment: none | id number | initial | inherit;

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      /* "my-counter" to 0 */
      counter-reset: my-counter;
      }
      h2::before {
      /* "my-counter" by 1 */
      counter-increment: my-counter;
      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>

Ein weiteres Beispiel, wo die Abschnitte und Unterabschnitte durchnummeriert sind.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      body {
      /* Set "section" to 0 */
      counter-reset: section;
      }
      h1 {
      /* Set "subsection" to 0 */
      counter-reset: subsection;
      }
      h1::before {
      counter-increment: section;
      content: "Book " counter(section) ": ";
      }
      h2::before {
      counter-increment: subsection;
      content: counter(section) "." counter(subsection) " ";
      }
    </style>
  </head>
  <body>
    <h1>HTML</h1>
    <h2>HTML-Basic</h2>
    <h2>HTML-Vorlagen</h2>
    <h2>HTML-Hinweise</h2>
    <h2>HTML-Tags</h2>
    <h1>CSS</h1>
    <h2>CSS-Basic</h2>
    <h2>CSS-Hinweise</h2>
    <h2>CSS Advanced</h2>
    <h2>CSS-Guides</h2>
    <h2>CSS-Selektoren</h2>
    <h2>CSS-Eigenschaften</h2>
  </body>
</html>

Werte

Wert Beschreibung
none Die Zähler werden nicht inkrementiert. Das ist der Standardwert.
id number Id definiert, welcher Zähler für die Schrittweite verwendet wird. Number definiert, wie stark der Zähler inkrementiert wird.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

2.0+ 12.0+ 1.0+ 3.1+ 9.2+


Finden Sie das nützlich?

Ähnliche Artikel