CSS-Zähler

Pizza

Hamburger

Hotdogs

CSS-Counter sind von CSS gehaltene "Variablen", deren Wert durch CSS-Regeln inkrementiert werden kann (um ihre Verwendungshäufigkeit zu verfolgen).

Counter ermöglichen es Ihnen, das Aussehen anhand der Position des Inhalts im Dokument anzupassen.

Automatische Nummerierung mit Countern

CSS-Counter funktionieren wie "Variablen". Der Wert der Variablen kann durch CSS-Regeln inkrementiert werden (um ihre Verwendungshäufigkeit zu verfolgen).

Um CSS-Counter zu verwenden, verwenden wir folgende Attribute:

  • counter-reset - den Counter erstellen oder zurücksetzen
  • counter-increment - den Zählerwert erhöhen
  • content - das generierte Inhalt einfügen
  • counter() oder counters() Funktion - den Wert des Counters zu dem Element hinzufügen

Um CSS-Counter zu verwenden, müssen Sie zunächst counter-reset Erstellen Sie es.

Das folgende Beispiel erstellt einen Zähler für die Seite (im body-Selektor) und erhöht dann den Zählerwert für jedes <h2>-Element und fügt am Anfang jedes <h2>-Elements "Abschnitt <Wert des Zählers>:" hinzu:

Beispiel

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Abschnitt " counter(section) ": ";
}

Versuchen Sie es selbst

Verschachtelte Zähler

Das folgende Beispiel erstellt einen Zähler für die Seite (Abschnitt) und einen Zähler für jedes <h1>-Element (subsection).

"section"-Zähler zählt für jeden <h1>-Element und schreibt "Abschnitt" sowie den Wert des section-Zählers, "subsection"-Zähler zählt für jeden <h2>-Element und schreibt den Wert des section-Zählers sowie den Wert des subsection-Zählers:

Beispiel

body {
  counter-reset: section;
}
h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Abschnitt " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Versuchen Sie es selbst

Counter sind auch sehr nützlich für die Erstellung von Inhaltsverzeichnissen, da ein neuer Counter-Instanz automatisch in den Unterlementen erstellt wird. Hier verwenden wir counters() Die Funktion fügt eine Zeichenkette zwischen Countern verschiedener Ebenen ein:

Beispiel

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Versuchen Sie es selbst

CSS-Zählereigenschaft

Eigenschaft Beschreibung
content Verwenden zusammen mit ::before und ::after Pseudo-Elementen, um generierte Inhalte einzufügen.
counter-increment Erhöhen eines oder mehrerer Zählerwerte.
counter-reset Erstellen oder zurücksetzen eines oder mehrerer Zähler.