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. Mit CSS haben Sie mehrere Möglichkeiten, die Zähler in einer Liste zu steuern.
Stile auflisten
Es gibt eine Vielzahl vordefinierter Listenformattypen, die Zahlen, Buchstaben, römische Ziffern und viele internationale Zählsysteme unterstützen.
Zusätzlich zu den von Browsern unterstützten Stilen hat das W3C vorgefertigte Zählerstile veröffentlicht, die 181 zusätzliche Stile in 45 Schriftsystemen unterstützen.
Wenn diese Optionen nicht Ihren Anforderungen entsprechen, können Sie auch eine benutzerdefinierte @counter-style definieren. So können Sie beispielsweise benutzerdefinierte Symbole, ein Präfix und ein Suffix angeben.
Standardmäßig ist das Listenzeichen outside die Liste, vor der Liste positioniert und rechts ausgerichtet. Mit list-style-position: inside können Sie die Markierung auch innerhalb der Liste positionieren.
Zähler
Mit Listenformatierungen wird gesteuert, wie die Markierungen für Listenelemente angezeigt werden. Mit Zählern können Sie die anzuzeigenden Werte festlegen. Für <li>-Listenelemente erstellt der Browser einen Zähler namens list-item, der für jedes gefundene Listenelement um 1 erhöht wird.
CSS-Zähler erfassen, wie oft ein Element mit einem entsprechenden counter-increment-Wert gerendert wird.
Verwenden Sie zum Erstellen eines neuen Zählers counter-reset mit einem Zählernamen und optional einem Startwert. Sie legen diesen Wert häufig für ein übergeordnetes Element fest, das alle Elemente enthält, die gezählt werden sollen.
Fügen Sie dann jedem Element, das Sie zählen möchten, die Property counter-increment hinzu.
Schließlich wird der Zählerwert mit der Funktion counter() angezeigt.
In diesem Beispiel soll die laufende Nummer 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 Zähler bei jeder Fußnotenverknüpfung.
Sie können auch mehrere Zähler haben, die unterschiedliche Elemente zählen. Was wäre, wenn Sie im Beispiel für Fußnoten den Index des Abschnitts und des Absatzes anzeigen möchten, in dem sich die Fußnote befindet?
Die Anzahl der Abschnitte kann im Textkörper mit counter-reset 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 die Anzahl 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 Liste verschachteln? Der list-item-Zähler wird für jedes <ul>- oder <ol>-Element initialisiert. Wenn Sie counter() verwenden, 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 eins 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 Attribut reversed zum <ol> hinzu. Wenn Sie den Standardlistenstil verwenden, funktionieren die Markierungen wie erwartet. Wenn Sie 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.