Reset balik - Trik CSS | CSS Almanak 2024

The counter-resetproperti memungkinkan untuk penomoran otomatis elemen. Seperti daftar yang dipesan (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

The counter-resetproperti digunakan untuk me-reset counter CSS ke nilai yang diberikan.

Ini adalah bagian dari modul penghitung CSS yang merupakan bagian dari konten yang dihasilkan, penomoran otomatis, dan daftar spesifikasi CSS2.1, diperpanjang dalam spesifikasi CSS3 Modul Konten yang Dibuat dan Diganti.

Sintaksis

counter-reset: ( ?)+ | none

Dimana…

adalah nama penghitung yang ingin Anda setel ulang
adalah nilai untuk mengatur ulang penghitung
none nonaktifkan penghitung

body ( counter-reset: my-awesome-counter 0; )

Catatan: nilai default untuk integer adalah 0. Jika tidak ada integer yang disetel setelah nama penghitung, itu akan diatur ulang ke 0. Jadi, ini berfungsi seperti yang diharapkan:

body ( counter-reset: my-awesome-counter; )

Anda dapat mengatur ulang beberapa penghitung sekaligus dengan daftar yang dipisahkan spasi, masing-masing dengan nilai spesifiknya jika Anda menginginkannya.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Ini akan mengatur ulang my-awesome-counterke 5 dan my-other-counterke nilai default: 0.

Anda dapat melihat daftar ini sebagai: counter1 value1 counter2 value2 counter3 value3… . Jika sebuah nilai dihilangkan, nilainya 0.

Demo

Dalam demo berikut, articlesetel ulang sectionpenghitung ke nilai defaultnya (0), yang kemudian ditambahkan pada setiap kemunculan bagian, lalu ditampilkan di depan judul bagian.