Styling Ordered List

Pada ul, penandanya bebas bentuknya; pada ol penanda justru membawa informasi — urutan. Karena itu styling ol punya pertanyaan khasnya sendiri: bentuk angka seperti apa yang paling tepat, dan seberapa jauh nomor itu boleh kita gayai. Chapter ini menjawab keduanya: memilih varian penomoran lewat list-style-type, mengatur arah dan titik awal hitungan dengan atribut HTML, lalu menata nomor tersebut dengan ::marker hingga sekelas badge langkah.

Varian Penomoran dengan list-style-type #

list-style-type pada ol menerima deretan nilai penomoran yang jauh lebih banyak daripada bentuk bullet ul:

.panduan-install {
  list-style-type: decimal-leading-zero;
}

.surat-lamaran {
  list-style-type: upper-alpha;
}

Demo berikut menyandingkan kedua class di atas:

Angka berawalan nol cocok pula untuk daftar yang panjangnya lebih dari sembilan item, karena lebar kolom nomornya tetap konsisten.

Satu pertimbangan memilih varian: penanda ol membaca arti, jadi ganti bentuknya hanya bila maknanya bertahan. Langkah resep tetap urut walau ditulis i, ii, iii — tetapi deretan poin penawaran yang ditulis A, B, C akan terasa seperti pilihan ganda bila sebenarnya tak ada hierarkinya. Bila urutan tak bermakna, gunakan ul.

start dan reversed pada ol #

Dua atribut HTML mengatur hitungan tanpa menyentuh CSS sama sekali:

<ol start="4">
  <li>Langkah keempat</li>
</ol>

<ol reversed>
  <li>Peringkat pertama</li>
</ol>

Atribut start memulai hitungan dari angka tertentu — berguna saat daftar bersambung dari bagian halaman sebelumnya. Atribut reversed membalik arah hitungan sehingga item pertama memperoleh angka terbesar, cocok untuk daftar peringkat yang menyusut. Keduanya kita kenalkan pada section Typography; di sini cukup diingat bahwa keduanya milik HTML, bukan CSS.

Menata Nomor dengan ::marker #

Nomor ol adalah penanda seperti bullet ul, sehingga bisa ditata langsung dengan ::marker:

.langkah-seduh li::marker {
  color: #1f6f54;
  font-weight: 700;
  font-size: 18px;
}

Demo berikut memakai ::marker untuk nomor langkah yang menonjol, plus satu daftar peringkat reversed sebagai pembanding:

Batasnya sama seperti pada ul: ::marker hanya menerima warna dan properti font, jadi nomor berlatar warna atau berbingkai tidak bisa lewat jalur ini.

Nomor Kustom dengan CSS Counter #

Untuk badge sungguhan — nomor di dalam lingkaran berlatar warna — CSS menyediakan mekanisme counter yang bekerja bersama ::before:

.langkah-badge {
  list-style: none;
  padding: 0;
  counter-reset: langkah;
}

.langkah-badge li {
  counter-increment: langkah;
}

.langkah-badge li::before {
  content: counter(langkah);
}

Mekanismenya tiga lapis: counter-reset mendeklarasikan penghitung bernama langkah pada induknya, counter-increment menaikkan nilainya satu per satu pada setiap li, dan counter(langkah) mengeluarkan nilainya sebagai teks ::before. Karena yang menggambar adalah ::before, kita bebas memberi background-color, border-radius, ukuran, dan posisi — semua property kotak yang biasa.

Kesalahan Umum #

Kesalahan pertama paling sering terjadi dan paling murah dicegah: urutan adalah informasi, dan elemen ol adalah cara menuliskannya.

Ringkasan #

list-style-type memilih bentuk nomor — dari decimal berawalan nol hingga huruf dan angka Romawi — sementara atribut start dan reversed mengatur hitungan dari sisi HTML. ::marker cukup untuk menata warna dan ukuran nomor; bila butuh badge berlatar penuh, CSS counter bersama ::before adalah jalurnya. Ketiga property penanda ini terkait erat, dan chapter berikutnya menyatukannya: shorthand list-style beserta kemampuan memasang gambar sebagai penanda.