Wiele typów treści najlepiej przedstawić w formie listy HTML. W przypadku treści w postaci listy uporządkowanej, np. kroków przepisu lub przypisów do artykułu, znacznik często zawiera też informacje. CSS udostępnia kilka sposobów kontrolowania liczników na liście.
Style listy
Dostępnych jest wiele predefiniowanych typów stylów list, które obsługują cyfry, litery alfabetu, cyfry rzymskie i wiele międzynarodowych systemów numeracji.
Oprócz stylów obsługiwanych przez przeglądarki W3C opublikowało gotowe style liczników, które obsługują 181 dodatkowych stylów w 45 systemach pisma.
Jeśli te opcje nie spełniają Twoich potrzeb, możesz też zdefiniować niestandardowy @counter-style. Możesz określić niestandardowe symbole, prefiks i sufiks oraz inne elementy.
Domyślnie znacznik elementu to outside lista, umieszczony przed listą i wyrównany do prawej strony. Możesz też umieścić znacznik elementu wewnątrz listy za pomocą list-style-position: inside.
Liczniki
Style list kontrolują sposób wyświetlania znaczników elementów listy, a liczniki pozwalają kontrolować wyświetlane wartości. W przypadku elementów listy <li> przeglądarka tworzy licznik o nazwie list-item, który jest zwiększany o 1 dla każdego napotkanego elementu listy.
Liczniki CSS zliczają, ile razy został wyrenderowany element, który ma ustawioną odpowiednią wartość counter-increment.
Aby utworzyć nowy licznik, użyj funkcji counter-reset z nazwą licznika i opcjonalnie wartością początkową. Często ustawia się go w elemencie nadrzędnym, który zawiera wszystkie elementy, które mają być zliczane.
Następnie dodaj właściwość counter-increment do każdego elementu, który chcesz zliczać.
Na koniec wyświetl wartość licznika za pomocą funkcji counter().
W tym przykładzie chcemy wyświetlać bieżącą liczbę przypisów jako tekst linku do każdego przypisu. Chcemy, aby licznik był jeden dla całego dokumentu, więc ustawiamy counter-reset: note w treści i zwiększamy wartość przy każdym linku do przypisu.
Możesz też mieć kilka liczników zliczających różne elementy. W przykładzie z przypisami, co zrobić, jeśli chcesz wyświetlić indeks sekcji i akapitu, w którym znajduje się przypis?
Liczbę sekcji można utworzyć w treści za pomocą elementu counter-reset, a następnie zwiększać ją w każdym elemencie <h2>. Chcemy, aby liczba akapitów resetowała się w każdej sekcji, dlatego użyjemy funkcji counter-reset w przypadku elementów <h2> i zwiększymy wartość w przypadku elementów <p>.
Na koniec łączymy wartości licznika we właściwości content.
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
Zagnieżdżone liczniki
Co się stanie, gdy zagnieździsz listę w innej liście? Licznik list-item jest inicjowany dla każdego elementu <ul> lub <ol>, a użycie counter() zwraca tylko liczbę najbardziej wewnętrznego licznika. Jeśli chcesz wyświetlić liczbę z każdego zagnieżdżonego licznika, użyj funkcji counters(), która przyjmuje nazwę licznika i separator.
li::marker {
content: counters(list-item, ".")
}
Odwracanie liczników
Domyślnie liczniki (w tym domyślny licznik list-item dla elementów <ol>) zaczynają się od 0 i zwiększają o 1 dla każdego elementu, co oznacza, że pierwszy element będzie miał wartość 1. Co zrobić, jeśli chcesz odliczać wstecz do 1?
Aby to zrobić, dodaj atrybut reversed do elementu <ol>. Jeśli używasz standardowego stylu listy, znaczniki będą działać zgodnie z oczekiwaniami. Jeśli jednak używasz licznika niestandardowego, musisz ustawić wartość counter-increment na wartość ujemną i ręcznie obliczyć wartość początkową licznika.