Atribut counter-set CSS

Halaman sebelumnya counter-reset
Halaman berikutnya @counter-style

Definisi dan penggunaan

counter-set Atribut digunakan untuk membuat dan menata penhitung CSS ke nilai khusus.

counter-set Atribut biasanya digunakan bersama dengan atribut counter-increment dan atribut content.

Contoh

Contoh 1

Buat penghitung ("my-counter"), aturnya menjadi 5, dan tambahkan 1 setiap kali muncul selector <h2>:

body {
  /* Mengatur "my-counter" menjadi 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Tambahkan "my-counter" 1 */
  counter-increment: my-counter;
  content: "Section " counter(my-counter) ". ";
}

Coba sendiri

Contoh 2

Buat penghitung ("my-counter"), aturnya menjadi 5, dan kurangi 1 setiap kali muncul selector <h2>:

body {
  /* Mengatur "my-counter" menjadi 5 */
  counter-set: my-counter 5;
}
h2::before {
  /* Menurunkan "my-counter" 1 */
  counter-increment: my-counter -1;
  content: "Section " counter(my-counter) ". ";
}

Coba sendiri

Contoh 3

Gunakan format "Section 10:"、"10.1"、"10.2" untuk nomor bab dan subbab:

body {
  /* Mengatur "section" menjadi 9 */
  counter-set: section 9;
}
h1 {
  /* Atur "subsection" ke 0 */
  counter-set: subsection 0;
}
h1::before {
  /* Tambahkan "section" 1 */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* Tambahkan "subsection" 1 */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Coba sendiri

Contoh 4

Buat penomoran, aturnya ke 9, dan tambahkan 1 setiap kali terjadi pemilihan <h2> (dengan angka Romawi):

body {
  /* Atur "my-counter" ke 9 */
  counter-set: my-counter 9;
}
h2::before {
  /* Tambahkan "my-counter" 1 */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Coba sendiri

Syntaks CSS

counter-set: none|counter-name number|initial|inherit;

Nilai atribut

Nilai	Deskripsi
none	Nilai default. Jangan atur penomoran.
counter-name number	Nama penomoran yang akan diatur dan nilai nya. Setiap kali terjadi pemilihan penomoran, penomoran akan diatur ke nilai ini. Nilai default adalah 0.
initial	Atur atribut ini ke nilai default. Lihat initial。
inherit	Mengambil atribut ini dari elemen induknya. Lihat inherit。

Nilai default：	none
Inheritance：	Tidak
Pembuatan animasi：	Tidak didukung. Lihat:Atribut yang berhubungan dengan animasi。
Versi：	CSS2
Syntaks JavaScript：	object.style.counterSet="4"