Banyak jenis konten yang paling baik ditampilkan sebagai daftar HTML. Untuk konten daftar berurutan, seperti langkah-langkah resep atau catatan kaki untuk artikel, penanda sering kali juga berisi informasi. CSS menyediakan beberapa cara untuk mengontrol penghitung dalam daftar.
Gaya daftar
Ada berbagai jenis gaya daftar standar yang mendukung angka, alfabet, angka Romawi, dan banyak sistem penghitungan internasional.
Selain gaya yang didukung oleh browser, W3C memublikasikan Gaya Penghitung Siap Pakai, dengan dukungan untuk 181 gaya tambahan dalam 45 sistem penulisan.
Jika opsi ini tidak sesuai dengan kebutuhan Anda, Anda juga dapat menentukan @counter-style kustom. Hal ini memungkinkan Anda menentukan simbol kustom, awalan dan akhiran, dan lainnya.
Secara default, penanda item adalah outside daftar, diposisikan di depan daftar, dan diratakan ke kanan. Anda juga dapat memosisikan penanda item di dalam daftar, dengan list-style-position: inside.
Penghitung
Meskipun gaya daftar mengontrol cara penanda item daftar ditampilkan, penghitung memungkinkan Anda mengontrol nilai yang akan ditampilkan. Untuk elemen item daftar <li>, browser membuat penghitung bernama list-item yang bertambah 1 untuk setiap item daftar yang ditemui.
Penghitung CSS menyimpan jumlah berjalan berapa kali elemen yang memiliki nilai counter-increment yang sesuai ditetapkan dirender.
Untuk membuat penghitung baru, gunakan counter-reset dengan nama penghitung dan, secara opsional, nilai awal. Anda akan sering menetapkannya pada elemen induk yang berisi semua elemen yang akan dihitung.
Kemudian, tambahkan properti counter-increment pada setiap elemen yang ingin Anda hitung.
Terakhir, tampilkan nilai penghitung menggunakan fungsi counter().
Dalam contoh ini, kita ingin menampilkan jumlah catatan kaki yang sedang berjalan sebagai teks link untuk setiap catatan kaki. Karena kita menginginkan satu penghitung untuk seluruh dokumen, kita menetapkan counter-reset: note pada isi, dan menaikkan setiap link catatan kaki.
Anda juga dapat memiliki beberapa penghitung yang menghitung item yang berbeda. Dalam contoh catatan kaki, bagaimana jika Anda ingin menampilkan indeks bagian dan paragraf tempat catatan kaki berada?
Jumlah bagian dapat dibuat di isi menggunakan counter-reset, lalu bertambah di setiap elemen <h2>. Kita ingin jumlah paragraf direset untuk setiap bagian, jadi kita akan menggunakan counter-reset pada elemen <h2>, dan menambahkannya pada elemen <p>.
Terakhir, kita menggabungkan nilai penghitung dalam properti content.
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
Penghitung bertingkat
Apa yang terjadi jika Anda menyusun daftar di dalam daftar? Penghitung list-item diinisialisasi untuk setiap elemen <ul> atau <ol>, dan penggunaan counter() hanya menampilkan jumlah hitungan paling dalam. Jika Anda ingin menampilkan jumlah dari setiap penghitung bertingkat, gunakan fungsi counters(), yang menggunakan nama penghitung dan pemisah.
li::marker {
content: counters(list-item, ".")
}
Penghitung terbalik
Secara default, penghitung (termasuk penghitung list-item implisit untuk elemen <ol>) dimulai dari 0, dan bertambah satu untuk setiap elemen, yang berarti elemen pertama akan dihitung sebagai 1. Bagaimana jika Anda ingin menghitung mundur ke 1?
Untuk melakukannya, tambahkan atribut reversed ke <ol>. Jika Anda menggunakan gaya daftar standar, penanda akan berfungsi seperti yang diharapkan. Namun, jika menggunakan penghitung kustom, Anda harus menyetel counter-increment ke nilai negatif, dan menghitung nilai awal penghitung secara manual.