Styling Lists

Daftar muncul di mana-mana: menu navigasi, langkah resep, daftar fitur, bahkan rangkaian hasil pencarian. Browser menggambarnya dengan bullet dan nomor default, plus indentasi bawaan yang sering tidak sesuai desain. Pada chapter ini kita mengenali gaya default ul dan ol, mengganti bentuk penanda lewat list-style-type, mengatur posisinya, menerapkan resep menghapus bullet untuk navigasi, dan menata marker langsung dengan ::marker.

Gaya Default ul dan ol #

Dua fakta di balik tabel itu layak diingat. Pertama, setiap li dirender dengan display: list-item — satu-satunya display yang menggambar penanda. Kedua, penanda digambar di luar kotak konten li, sejajar dengan tepi padding induknya; perilaku ini ditentukan property list-style-position yang nilai defaultnya outside.

Ketiga aspek penanda — bentuk, posisi, dan gambar — bisa juga disetel sekaligus lewat shorthand list-style, misalnya list-style: square inside. Deklarasi list-style-image: url(...) bahkan dapat memasang gambar sebagai penanda, tetapi pendekatan itu kini jarang dipilih: ukuran gambarnya sulit dikendalikan, sementara ::marker memberi kendali yang jauh lebih baik.

list-style-type: Bentuk Penanda #

.fitur-produk {
  list-style-type: square;
}

.langkah-resep {
  list-style-type: lower-roman;
}

Penomoran lower-roman dipakai saat daftar ingin terasa formal.

Nilai yang paling sering terpakai:

Daftar lengkapnya lebih panjang, dan penanda teks bebas serta penomoran kustom dengan counter CSS dibahas lebih dalam pada section Pseudo-classes dan Pseudo-elements. Untuk kebanyakan desain, tabel di atas sudah mencakup kebutuhan sehari-hari.

list-style-position: inside atau outside #

.daftar-inside {
  list-style-position: inside;
}

Demo berikut membandingkan keduanya pada teks yang sama yang melipat beberapa baris:

inside sering dipakai ketika ruang horizontal sempit.

Menghapus Bullet untuk Navigasi #

Menu navigasi hampir selalu dibangun dari ul, dan hampir selalu perlu dibersihkan dulu dari penanda serta jarak bawaannya:

.nav-utama {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

1. list-style: none menghapus penanda — shorthand yang sekaligus menyetel type, position, dan image.
2. margin: 0 dan padding: 0 menghapus jarak default ul. Tanpa dua baris ini, bullet sudah hilang tetapi indentasi sisa masih tersisa.
3. display: flex menaruh item berjajar ke samping, dan gap memberi jarak antaritem — dibahas tuntas pada section Flexbox; di sini cukup polanya.

Menata Marker dengan ::marker #

.daftar-belanja li::marker {
  color: #1f6f54;
  font-weight: 700;
}

::marker hanya menerima warna dan properti font seperti font-size dan font-weight — batas itu cukup untuk kebanyakan desain.

Sebenarnya sebagian gaya bisa sampai ke penanda lewat pewarisan biasa: menata color pada li ikut mewarnai markernya. ::marker baru diperlukan ketika kita ingin penanda dan teks item tampak berbeda — persis seperti pada demo berikut:

start dan reversed pada ol #

Dua atribut HTML mengatur penomoran tanpa menyentuh CSS:

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

<ol reversed>
  <li>Peringkat teratas</li>
</ol>

Atribut start memulai hitungan dari angka tertentu — berguna ketika daftar bersambung dari bagian halaman sebelumnya — sedangkan reversed membalik arah hitungan sehingga item pertama memperoleh angka paling besar, cocok untuk daftar peringkat.

Kesalahan Umum #

Ringkasan #

list-style-type memilih bentuk penanda, list-style-position menempatkannya di dalam atau di luar kotak konten, dan ::marker memberi gaya khusus pada penanda itu sendiri. Untuk menu, resep wajibnya adalah list-style: none disertai reset margin dan padding, lalu item dijajarkan dengan flex. Dengan ini seluruh elemen teks utama sudah kita kuasai, dan chapter penutup section ini siap merangkainya menjadi tipografi yang nyaman dibaca.