Counter CSS

Counter CSS adalah "variabel" yang dikelola oleh CSS yang nilainya dapat ditingkatkan oleh aturan CSS (untuk melacak berapa kali mereka digunakan). Counter memungkinkan Anda menyesuaikan tampilan konten berdasarkan penempatannya di dokumen.

Penomoran Otomatis Dengan Counter

Counter CSS seperti "variabel". Nilai variabel dapat ditambah dengan aturan CSS (yang akan melacak berapa kali mereka digunakan).

Untuk bekerja dengan counter CSS, kita akan menggunakan properti berikut:

• counter-reset - Membuat atau mengatur ulang counter
• counter-increment - Menambah nilai counter
• content - Menyisipkan konten yang dihasilkan
• counter() atau counters() function - Menambahkan nilai penghitung ke elemen

Untuk menggunakan counter CSS, counter harus dibuat terlebih dahulu dengan counter-reset.

Contoh berikut membuat counter untuk halaman (dalam pemilih isi), lalu menambah nilai counter untuk setiap elemen <h2> dan menambahkan "Section <nilai counter>:" ke awal setiap elemen <h2>:

Menggunakan Counter CSS:

Tutorial HTML

Tutorial CSS

Tutorial JavaScript

Contoh

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Counter Bersarang

Contoh berikut membuat satu counter untuk halaman (section) dan satu counter untuk setiap elemen <h1> (subsection). Counter "section" akan dihitung untuk setiap elemen <h1> dengan "Section<nilai counter section>.", dan section"subsecion" akan dihitung untuk setiap elemen <h2> dengan "<nilai counter section>.< nilai counter subsection>":

Tutorial HTML:

Tutorial HTML

Tutorial CSS

Tutorial Scripting:

JavaScript

VBScript

Tutorial XML:

XML

XSL

Contoh

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Counter juga dapat berguna untuk membuat daftar outline karena instance counter baru secara otomatis dibuat di elemen turunan. Di sini kita menggunakan fungsi counters() untuk menyisipkan string di antara berbagai level counter bersarang:

Contoh

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Sumber referensi: w3schools