Hitung CSS

Pizza

Hamburger

Hotdogs

Penhitungan CSS adalah "variabel" yang dijaga oleh CSS, nilai yang dapat dinaikkan melalui aturan CSS (untuk melacak penggunaannya).

Penhitungan memungkinkan Anda mengatur gaya penampilannya berdasarkan posisi konten dalam dokumen.

Penomoran otomatis dengan penhitungan

Penhitungan CSS seperti "variabel" Variabel nilai dapat dinaikkan melalui aturan CSS (untuk melacak penggunaannya).

Untuk menggunakan penhitungan CSS, kita akan menggunakan atribut berikut:

  • counter-reset - Membuat atau menata ulang penhitungan
  • counter-increment - Menaikkan nilai penhitungan
  • content - Menyisipkan konten yang dihasilkan
  • counter() atau counters() fungsi - menambahkan nilai penhitungan ke elemen

Untuk menggunakan penhitungan CSS, harus digunakan terlebih dahulu counter-reset Buatnya.

Contoh di bawah ini membuat penhitungan untuk halaman (pada pemilih body) dan menambahkan nilai penhitungan untuk setiap elemen <h2>, dan menambahkan "Section <nilai penhitungan>:" di awal setiap elemen <h2>:

Contoh

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

Coba Sendiri

Penhitungan yang bersarang

Contoh di bawah ini membuat penhitungan untuk halaman (section) dan membuat penhitungan untuk setiap elemen <h1> (subsection).

"section" penhitungan menghitung setiap elemen <h1>, dan menuliskan "Section" serta nilai penhitungan section, "subsection" penhitungan menghitung setiap elemen <h2>, dan menuliskan nilai penhitungan section serta subsection:

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) " ";
}

Coba Sendiri

Penhitungan ini sangat berguna untuk membuat daftar uraian, karena akan secara otomatis membuat instance penhitungan baru di dalam elemen anak. counters() Fungsi ini menambahkan sebuah string di antara penhitungan tingkat yang berbeda:

Contoh

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

Coba Sendiri

Properti Pencacah CSS

Properti Deskripsi
content Gunakan bersama ::before dan ::after pseudo-element untuk memasukkan konten yang dihasilkan.
counter-increment Tingkatkan nilai penhitungan satu atau lebih.
counter-reset Buat atau atur kembali satu atau lebih penhitungan.