Properti kontra-kenaikan CSS
Contoh
Buat penghitung ("penghitung detik saya") dan tingkatkan satu untuk setiap kemunculan pemilih <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: "Section "
counter(my-sec-counter) ". ";
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti counter-increment
menambah atau mengurangi nilai dari satu atau lebih penghitung CSS.
Properti counter-increment
ini biasanya digunakan bersama dengan properti
counter-reset dan properti
konten .
Nilai bawaan: | tidak ada |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS2 |
Sintaks JavaScript: | objek .style.counterIncrement = "subbagian"; |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Property | |||||
---|---|---|---|---|---|
counter-increment | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Sintaks CSS
counter-increment: none|id|initial|inherit;
Nilai properti
Value | Description |
---|---|
none | Default value. No counters will be incremented |
id number | The id defines which counter to increment. The number sets how much the counter will increment on each occurrence of the selector. The default increment is 1. Negative values are allowed. If id refers to a counter that has not been initialized by counter-reset, the default initial value is 0 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Buat penghitung ("penghitung detik saya") dan kurangi satu untuk setiap kemunculan pemilih <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Decrement "my-sec-counter" by 1 */
counter-increment:
my-sec-counter -1;
content: "Section "
counter(my-sec-counter) ". ";
}
Contoh
Penomoran bagian dan sub-bagian dengan "Bagian 1:", "1.1", "1.2", dll.:
body
{
/* Set "section" to 0 */
counter-reset: section;
}
h1
{
/* Set "subsection" to 0 */
counter-reset: subsection;
}
h1::before
{
/* Increment "section" by 1 */
counter-increment: section;
content: "Section " counter(section) ": ";
}
h2::before {
/* Increment "subsection" by 1 */
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
Contoh
Buat penghitung dan tambah satu (menggunakan angka Romawi) untuk setiap kemunculan pemilih <h2>:
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}
h2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment:
my-sec-counter;
content: counter(my-sec-counter,
upper-roman) ". ";
}
Halaman Terkait
Referensi CSS: ::sebelum elemen semu
Referensi CSS: ::setelah elemen semu
Referensi CSS: properti konten
Referensi CSS: properti counter-reset
Fungsi CSS: fungsi penghitung ()
Referensi DOM HTML: properti counterIncrement