tutorial pengembangan web terbaru
 

CSS counter

❮ Sebelumnya Bab selanjutnya ❯

Menggunakan Counters CSS

counter CSS seperti "variabel". Nilai-nilai variabel dapat bertambah dengan aturan CSS (yang akan melacak berapa kali mereka digunakan).

Untuk bekerja dengan counter CSS kita akan menggunakan properti berikut:

  • counter-reset - Menciptakan atau reset counter
  • counter-increment - increment nilai kontra
  • content - Sisipan konten yang dihasilkan
  • counter() atau counters() fungsi - Menambahkan nilai counter untuk elemen

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

Contoh berikut membuat sebuah counter untuk halaman (pemilih tubuh), kemudian menambahkan nilai counter untuk setiap <h2> elemen dan menambahkan "Section < value of the counter >:" untuk setiap awal <h2> elemen:

Contoh

body {
    counter-reset: section;
}

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

Penghitung nesting

Contoh berikut membuat satu meja untuk halaman (bagian) dan satu meja untuk setiap <h1> elemen (ayat). The "section" kontra akan dihitung untuk setiap <h1> elemen dengan "Section < value of the section counter >." , Dan "subsection" kontra akan dihitung untuk setiap <h2> elemen 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) " ";
}
Cobalah sendiri "

Sebuah counter juga dapat berguna untuk membuat daftar diuraikan karena contoh baru dari sebuah counter secara otomatis dibuat dalam elemen anak. Di sini kita menggunakan counters() berfungsi untuk memasukkan string antara berbagai tingkat counter bersarang:

Contoh

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

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

CSS Kontra Properti

Milik Deskripsi
content Digunakan dengan :: sebelum dan :: setelah pseudo-elemen, untuk memasukkan konten yang dihasilkan
counter-increment Increment satu atau nilai counter lebih
counter-reset Menciptakan atau mengatur ulang satu atau lebih counter

❮ Sebelumnya Bab selanjutnya ❯