CSS-Eigenschaft counter-increment

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.