Properti counter-increment

Properti counter-increment mengatur penomoran elemen secara otomatis, misalnya, paragraf atau heading. Digunakan bersama dengan properti counter-reset, pseudoelemen after dan before, properti content, di dalamnya digunakan fungsi counter. Untuk pemahaman yang lebih baik, saya sarankan untuk melihat contoh-contoh.

Sintaks

cssselektor {
  counter-increment: nama [langkah] | none;
}

Nilai

Nilai	Keterangan
nama	Nama penghitung. Kata biasa (seperti nama kelas atau id). Dapat mengatur beberapa nama, dipisahkan dengan spasi. Dalam hal ini beberapa penghitung akan berubah secara bersamaan.
langkah	Bilangan bulat positif atau negatif. Parameter opsional.
`none`	Melarang peningkatan penghitung untuk selektor saat ini.

Nilai default: none.

Contoh

Mari buat agar paragraf dinomori secara otomatis:

html<div id="parent">
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Contoh

Misalkan selain penomoran ditambahkan juga beberapa teks. Dalam kasus kami № sebelum angka dan titik setelahnya:

html<div id="parent">
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Contoh

Mari mulai penomoran dari 10. Untuk itu nilai awal penghitung kita set ke sembilan, yaitu 1 kurang dari yang kita butuhkan:

html<div id="parent">
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Contoh

Sekarang misalkan penomoran dilakukan dengan langkah "2". Untuk itu sebagai langkah kita setel dua:

html<div id="parent">
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* setel dua */
  content: "№" counter(test) ".";
}

Результат:

Contoh

Pada contoh sebelumnya, penomoran dimulai dari dua, sedangkan kita ingin dari satu. Mengapa hal itu terjadi? Karena counter-reset mereset nilai penghitung ke nol, kemudian counter-increment menambahkan langkahnya: secara default satu, itulah sebabnya sebelumnya kami penomoran dimulai dari 1. Sekarang ditambahkan dua - dan penomoran dimulai dari dua.

Untuk memperbaiki masalah, atur nilai awal penghitung ke -1 dan sekarang penomoran akan dimulai dari 1 dan akan bertambah 2:

html<div id="parent">
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
  <p>teks</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Lihat juga

properti counter-reset,
yang mereset nilai penghitung ke nol