CSS

Counter di CSS: Cara Menggunakan dan Contoh Sintaknya

Counter di CSS adalah “variabel” yang dikelola oleh CSS yang nilainya dapat bertambah sesuai dengan aturan CSS (untuk melacak berapa kali variabel digunakan). Counter memungkinkan kita menyesuaikan tampilan konten berdasarkan penempatannya di dokumen.

Penomoran Otomatis Dengan Counter

Counter di CSS seperti “variabel”. Nilai variabel dapat bertambah sesuai dengan aturan CSS (yang akan melacak berapa kali variabel digunakan).

Untuk bekerja dengan counter di CSS, kita akan gunakan properti berikut:

  • counter-reset – Membuat atau me-reset counter
  • counter-increment – Menambahkan nilai counter
  • content – Menyisipkan konten yang dibuat
  • fungsi counter () atau counters () – Menambahkan nilai counter ke elemen

Untuk menggunakan counter di CSS harus membuat pengaturan ulang terlebih dahulu.

Contoh berikut membuat counter untuk halaman (body selector), lalu menambah nilai penghitung untuk setiap elemen <h2> dan menambahkan “Section <value of the counter>:” keawal setiap elemen <h2>:

Contoh :

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Counter di CSS:</h1>
<h2>Tutorial HTML</h2>
<h2>Tutorial CSS</h2>
<h2>Tutorial CSS</h2>


</body>
</html>

Counter Bersarang

Contoh berikut membuat satu counter untuk halaman (section) dan satu penghitung untuk setiap elemen<h1>(sub-section). Penghitung “section” akan dihitung untuk setiap elemen<h1> dengan “Section <value of the section counter> .”, Dan penghitung “sub-section” akan dihitung untuk setiap elemen<h2> dengan “<value of the section counter>.<value of the subsection counter>”:

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) " ";
<!DOCTYPE html>
<html>
<head>
<style>
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) " ";
}
</style>
</head>
<body>


<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Counter juga dapat berguna untuk membuat daftar yang diuraikan karena contoh counter baru secara otomatis dibuat dalam child element. 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,".") " ";
}
<!DOCTYPE html>
<html>
<head>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>


</body>
</html>

Propeti Counter CSS

PropertiDeskripsi
contentMenyisipkan konten yang dihasilkan, menggunakan pseudo-element :: before dan :: after
counter-incrementMenambahkan satu atau beberapa counter
counter-resetMembuat atau menyetel ulang satu atau lebih counter
Tabel Properti CSS


Hanifah Nurbaeti

Share
Tags: CSS