Daftar elemen bernomor
Dihalaman web (dokumen HTML) kita dapat melakukan penomoran otomatis atau memberikan nomor urut pada suatu daftar elemen.
Elemen HTML yang khusus untuk daftar bernomor biasanya menggunakan tag ol kependekan dari Ordered List yang berarti daftar berurutan. Sedangkan yang tidak berurutan adalah Unordered List dengan tag ul
Bagaimana cara memberi nomor berurutan otomatis pada elemen lainnya?
Untuk memberikan penomoran pada elemen selain List (li) yang merupakan daftar item atau pasangan dari elemen ol dan ul diatas, ikuti caranya dibawah ini.
Pseudo Element
Untuk memberikan penomoran otomatis pada suatu daftar elemen selain menggunakan ol, bisa dilakukan dengan cara menambahkan pseudo element
Pseudo Element adalah:
Elemen semu atau elemen bayangan yang terdapat ataupun ditambahkan pada elemen HTML.
Pesudo Elemen juga dapat digunakan sebagai selector dalam penggunaannya di CSS, contoh umum selektor CSS untuk Pseudo Elemen yang ditambahkan adalah :
:before, :after atau ::before, ::after.
Sedangkan pseudo elemen yang memang terdapat pada elemen HTML misalnya:
::placeholder, ::first-child dst.
Namun untuk menambahkan penomoran ini selektor pseudo yang digunakan adalah :before.
Dibawah ini contoh kodenya :
selektor {
counter-reset: tag-count;
}
selektor::before {
counter-increment: tag-count 1;
content: "" counter(tag-count) ". ";
} Pada bagian selektor bisa menggunakan nama tag elemen, class maupun id elemen. Sebagai contoh, klik tombol DEMO dibawah ini :
counter-reset
Properti CSS counter-reset berfungsi untuk menandai batas awal bahwa penghitungan / penomoran hanya akan dimulai dan dihentikan didalam elemen tersebut.
elemen-induk {
counter-reset: value;
}
elemen-item::before {
counter-increment: counter-reset value 1;
content: "" counter(counter-reset value) ". ";
}
value pada Properti CSS counter-reset dapat diisi dengan teks apapun untuk mewakili awal penghitungan pada properti elemen target penomoran. Misal :
elemen-induk {
counter-reset: hitung-mulai;
}
elemen-item::before {
counter-increment: hitung-mulai 1;
content: "" counter(hitung-mulai) ". ";
}
Untuk uji coba CSS diatas, akan kita terapkan pada elemen yang dijelaskan selanjutnya pada DEMO 2 dibawah ini.
Properti CSS counter-reset tersebut ditargetkan pada elemen induk atau elemen yang berperan sebagai kontainer daftar. Untuk lebih jelasnya kita lihat struktur atau susunan elemen yang akan diberikan penomoran dibawah ini.
Jika diperhatikan pada DEMO 1, yang menjadi elemen induk (kontainer) adalah body, karena seluruh paragraf berada didalam tag <body>. Oleh karena itu tag <body> yang ditargetkan sebagai counter-reset
Contoh lain penomoran menggunakan elemen dengan tag <div> untuk mempraktekkan penggunaan selektor class dan id. Sebelumnya perhatikan struktur elemennya dibawah ini.