Cara Membuat Nested List dengan CSS Counters

Pada postingan sebelumnya, saya sudah menjelaskan apa itu CSS Counters dan bagaimana cara menggunakannya untuk membuat daftar terurut.

Kali ini, saya akan menjelaskan bagaimana cara membuat nested list dengan CSS Counter.

Pertama, apa itu nested list?

Dalam bahasa Inggris, nested memiliki arti “bersarang”. Jadi, kita akan membuat daftar bersarang 😀 , aneh juga sepertinya kalau saya sebut daftar bersarang meskipun sebetulnya tidak ada yang salah dengan istilah itu.

Tapi agar lebih bisa dipahami, nested list adalah sebuah daftar dengan beberapa level kedalaman. Contohnya seperti yang ada pada gambar di atas. Atau contoh lainnya seperti ini:

HTML memiliki tag khusus untuk membuat daftar seperti yang terlihat pada gambar tapi sesuai judul, di sini kita tidak akan memanfaatkan tag HTML, melainkan CSS.

Struktur HTML

Pertama, kita buat dulu struktur HTML nya. Jika Anda ingin menerapkan cara ini di WordPress atau Blogspot, tinggal pahami struktur HTML di theme yang Anda gunakan lalu terapkan cara yang sama.

<body>
  <div id="content">
    <div class=nested-numeric>
      <h2>Item</h2>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
      <h2>Item</h2>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
      <h2>Item</h2>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
    </div>
    <div class=nested-roman>
      <h2>Item</h2>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
      <h2>Item</h2>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
      <h2>Item</h2>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
        <h3>sub-item</h3>
          <h4>sub-sub-item</h4>
          <h4>sub-sub-item</h4>
    </div>
  </div>
</body>

Perhatikan, di sini saya menggunakan tag <h2>, <h3>, dan <h4>, kenapa? Karena kasus yang sering saya temui, CSS counters digunakan untuk memberikan penomoran berurut pada tag heading dalam sebuah halaman.

Bagaimana jika ingin digunakan untuk membuat daftar biasa? Ya tetap bisa, Anda tinggal mengganti tag heading dengan tag HTML <li>.

Ada dua blok elemen dalam contoh karena memang saya ingin menunjukkan penerapan gaya penomoran yang berbeda pada setiap blok.

CSS

Berikut kode CSS nya:

#content {
  display: block;
  width: 700px;
  height: 100%;
  margin: 0 auto;
}

/*Ini untuk blok elemen pertama dengan gaya penomoron numerik*/
.nested-numeric {
  display: inline-block;
  width: 50%;
  float: left;
  counter-reset: h2-num;
}

.nested-numeric h2 {
  counter-increment: h2-num;
  counter-reset: h3-num;
}

.nested-numeric h2:before {
  content: counter(h2-num)'.';
  color: red;
  margin: 0 5px 0 0;
}

.nested-numeric h3 {
  counter-increment: h3-num;
  counter-reset: h4-num;
}

.nested-numeric h3:before {
  content: counter(h2-num)'.'counter(h3-num);
  color: red;
  margin: 0 5px 0 20px;
}

.nested-numeric h4 {
  counter-increment: h4-num;
}

.nested-numeric h4:before {
  content: counter(h2-num)'.'counter(h3-num)'.'counter(h4-num);
  color: red;
  margin: 0 5px 0 40px;
}

/*Ini untuk blok elemen kedua dengan gaya penomoron romawi*/
.nested-roman {
  display: inline-block;
  width: 50%;
  float: right;
  counter-reset: h2-rom;
}

.nested-roman h2 {
  counter-increment: h2-rom;
  counter-reset: h3-rom;
}

.nested-roman h2:before {
  content: counter(h2-rom,upper-roman)'.';
  color: blue;
  margin: 0 5px 0 0;
}

.nested-roman h3 {
  counter-increment: h3-rom;
  counter-reset: h4-rom;
}

.nested-roman h3:before {
  content: counter(h2-rom,upper-roman)'.'counter(h3-rom,upper-roman);
  color: blue;
  margin: 0 5px 0 20px;
}

.nested-roman h4 {
  counter-increment: h4-rom;
}

.nested-roman h4:before {
  content: counter(h2-rom,upper-roman)'.'counter(h3-rom,upper-roman)'.'counter(h4-rom,upper-roman);
  color: blue;
  margin: 0 5px 0 40px;
}

Saya menggunakan dua gaya penomoran, numerik yang secara default akan dipilih ketika kita tidak menyertakan attribute gaya penomoran. Kedua adalah gaya roman (angka romawi) dengan menyertakan attribute upper-roman pada properti content.

Hasilnya seperti ini:

See the Pen on CodePen.

Itu saja, semoga bermanfaat!

Struktur HTML

CSS

Related