Belajar counter pada css

belajar css

Kegunaan css counter

Counter CSS pada dasarnya adalah variable yang digunakan untuk penomoran, dan nilai dari counter bisa ditambahkan dengan aturan css. Counter membiarkan Anda menyesuaikan tampilan konten berdasarkan penempatannya dalam dokumen.

Penomoran otomatis dengan counter

Counter css seperti variable. Nilai-nilai variabel dapat bertambah dengan aturan css (yang akan melacak berapa kali mereka digunakan).

Berikut property counter css:

  • counter-reset – Mereset counter
  • counter-increment – Menaikan nilai counter
  • content – Sisipan konten yang dihasilkan
  • counter() atau counters() fungsi – Menambahkan nilai counter untuk elemen

Untuk menggunakan property counter css, Anda haruss terlebih dahulu menggunakan property counter-reset dan langkah pertama adalah mengatur ulang counter. 

Sebagai contoh “TesCounter” secara default diinisialisasi ke nilai 0 (nol) dan direset dengan property counter-reset:

Contoh:

Editor Online
  1. body {
  2. counter-reset: TesCounter;
  3. }

Lalu penambahan nilai penomoran dengan property counter-increment:

Contoh:

Editor Online
  1. h2::before {
  2. counter-increment: TesCounter;
  3. }

Lalu fungsi counter() atau counters() dalam konten digunakan untuk menampilkan konten dalam urutan tertentu

Contoh:

Editor Online
  1. h2::before {
  2. content: “Belajar ” counter(TesCounter) “: “;
  3. }

Berikut contoh lengkap:

Contoh:

Editor Online
  1. body {
  2. counter-reset: TesCounter;
  3. }
  4. h2::before {
  5. counter-increment: TesCounter;
  6. content: “Belajar ” counter(TesCounter) “: “;
  7. }

Nesting counter

Nesting counter bisa bersarang, counter bersarang biasanya digunakan untuk membuat sebuah subjudul.

Contoh:

Editor Online
  1. body {
  2. counter-reset: merek;
  3. }
  4. h1 {
  5. counter-reset: submerek;
  6. }
  7. h1::before {
  8. counter-increment: merek;
  9. content: “Produk ” counter(merek) “. “;
  10. }
  11. h2::before {
  12. counter-increment: submerek;
  13. content: counter(merek) “.” counter(submerek) ” “;
  14. }

Counter juga dapat digunakan untuk membuat list yang diuraikan, secara otomatis counter akan dibuat dalam elemen anak. Di sini kita menggunakan fungsi counters() untuk memasukkan string antara berbagai tingkat counter bersarang:

Contoh:

Editor Online
  1. ol {
  2. counter-reset: item;
  3. list-style-type: none;
  4. }
  5. li::before {
  6. counter-increment: item;
  7. content: counters(item,”.”) ” “;
  8. }

Daftar property counter

PropertyKegunaanya
contentDigunakan dengan pseudo-element :: before dan :: after, untuk menyisipkan konten yang dihasilkan
counter-incrementMeningkatkan satu atau lebih nilai counter
counter-resetMembuat atau mengatur ulang satu atau lebih counter

Leave a Reply

Your email address will not be published. Required fields are marked *