Zähler und Listenstile

Viele Arten von Inhalten lassen sich am besten als HTML-Liste darstellen. Bei Inhalten in geordneten Listen, z. B. Rezeptschritten oder Fußnoten für einen Artikel, enthält die Markierung oft auch Informationen. CSS bietet mehrere Möglichkeiten, die Zähler in einer Liste zu steuern.

Listenstile

Es gibt eine Vielzahl vordefinierter Listenstile, die Zahlen, Buchstaben, römische Ziffern und viele internationale Zählsysteme unterstützen.

Neben den von Browsern unterstützten Stilen hat das W3C Ready-made Counter Styles veröffentlicht, mit Unterstützung für 181 zusätzliche Stile in 45 Schriftsystemen.

Wenn diese Optionen nicht Ihren Anforderungen entsprechen, können Sie auch ein benutzerdefiniertes @counter-style definieren. So können Sie benutzerdefinierte Symbole, ein Präfix und ein Suffix und vieles mehr angeben.

Standardmäßig befindet sich die Elementmarkierung outside der Liste, vor der Liste und rechts ausgerichtet. Sie können die Elementmarkierung auch innerhalb der Liste positionieren, mit list-style-position: inside.

Zähler

Mit Listenstilen wird gesteuert, wie die Markierungen für Listenelemente angezeigt werden. Mit Zählern können Sie die anzuzeigenden Werte steuern. Für <li>-Listenelemente erstellt der Browser einen Zähler namens list-item, der für jedes Listenelement um 1 erhöht wird.

CSS-Zähler erfassen die Anzahl der Male, die ein Element mit einem entsprechenden counter-increment-Wert gerendert wird.

Verwenden Sie counter-reset mit einem Zählernamen und optional einem Anfangswert, um einen neuen Zähler zu erstellen. Dieser wird häufig für ein übergeordnetes Element festgelegt, das alle Elemente enthält, die gezählt werden sollen.

Fügen Sie dann jedem Element, das Sie zählen möchten, eine counter-increment-Property hinzu.

Zeigen Sie schließlich den Zählerwert mit der Funktion counter() an.

In diesem Beispiel soll die laufende Anzahl der Fußnoten als Linktext für jede Fußnote angezeigt werden. Da wir einen einzelnen Zähler für das gesamte Dokument benötigen, legen wir counter-reset: note für den Textkörper fest und erhöhen den Wert für jeden Fußnotenlink.

Sie können auch mehrere Zähler verwenden, um verschiedene Elemente zu zählen. Was wäre, wenn Sie im Beispiel mit den Fußnoten den Index des Abschnitts und des Absatzes anzeigen möchten, in dem sich die Fußnote befindet?

Die Anzahl der Abschnitte kann mit counter-reset im Textkörper erstellt und dann für jedes <h2> Element erhöht werden. Die Anzahl der Absätze soll für jeden Abschnitt zurückgesetzt werden. Daher verwenden wir counter-reset für <h2>-Elemente und erhöhen den Wert für <p>-Elemente.

Schließlich kombinieren wir die Zählerwerte in der Property content.

a:after {
  content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
  font-size: small;
  vertical-align: super;
}

Verschachtelte Zähler

Was passiert, wenn Sie eine Liste in einer anderen Liste verschachteln? Der Zähler list-item wird für jedes <ul>- oder <ol>-Element initialisiert und mit counter() wird nur die Anzahl des innersten Zählers zurückgegeben. Wenn Sie die Anzahl der einzelnen verschachtelten Zähler anzeigen möchten, verwenden Sie die Funktion counters(), die einen Zählernamen und ein Trennzeichen akzeptiert.

li::marker {
  content: counters(list-item, ".")
  }

Zähler umkehren

Standardmäßig beginnen Zähler (einschließlich des impliziten list-item Zählers für <ol> Elemente) bei 0 und werden für jedes Element um 1 erhöht. Das erste Element wird also als 1 gezählt. Was ist, wenn Sie rückwärts bis 1 zählen möchten?

Fügen Sie dazu das reversed Attribut zu <ol> hinzu. Wenn Sie den Standardlistenstil verwenden, funktionieren die Markierungen wie erwartet. Wenn Sie jedoch einen benutzerdefinierten Zähler verwenden, müssen Sie counter-increment auf einen negativen Wert festlegen und den Startwert für den Zähler manuell berechnen.

Verständnis prüfen