Latihan 1: CSS Counters — CSS

Latihan 1 dari materi CSS Counters di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Tiga .section di editor belum bernomor. Beri nomor otomatis lewat CSS, tanpa mengubah HTML-nya:

Di aturan .container, buat penghitungnya: counter-reset: section;
Di aturan .section::before, naikkan penghitung yang sama: counter-increment: section;
Masih di .section::before, tampilkan angkanya: content: counter(section) ". ";

Nama penghitungnya boleh lain, asal sama persis di counter-reset dan counter-increment. Hasilnya: 1. Pendahuluan, 2. Isi, 3. Penutup.

Hint

Penghitungnya dibuat sekali di pembungkus, lalu dinaikkan satu di tiap bagian, dan angkanya ditampilkan di depan tiap bagian.
Pakai counter-reset di .container, counter-increment di .section::before, dan content dengan counter() di .section::before juga.
.container { counter-reset: section; } lalu .section::before { counter-increment: section; content: counter(section) ". "; }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…