CODEWITHSUNDEEP
htmlcss
Taufik Nurhidayat
Taufik Nurhidayat

Reputation: 65

How to solve css increments for multi level lists

My css counters not work after ol.

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

.sidebox li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
<div class="sidebox my-3 p-3">Contents
  <ol>
    <li><a href="#section_1">Lorem Ipsum Dor</a></li>
    <li><a href="#section_2">Lorem Loreman</a></li>
    <li><a href="#section_3">Lorem I Lorem</a></li>
    <li><a href="#section_4">Loamsams</a></li>
    <ol>
      <li><a href="#section_5">Lmamam</a></li>
      <li><a href="#section_6">lorem Sinam </a></li>
    </ol>
    <li><a href="#section_7">Hello</a></li>
  </ol>
</div>

I dont know how to descibe it, but i want the list like this.

1 heading
2 heading
 2.1 Heading
3 Heading

but my css show like this

1 heading
2 heading
 2.1 heading
2.3 heading

how to solve it, please help me

Upvotes: 2

Views: 103

Answers (1)

Mers
Mers

Reputation: 734

There is nothing wrong with your CSS code, it’s your HTML. You have to nest the second ol within li of the first as so:

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

.sidebox li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}
<div class="sidebox my-3 p-3">Contents
  <ol>
    <li><a href="#section_1">Lorem Ipsum Dor</a></li>
    <li><a href="#section_2">Lorem Loreman</a></li>
    <li><a href="#section_3">Lorem I Lorem</a></li>
    <li><a href="#section_4">Loamsams</a>
    <ol>
      <li><a href="#section_5">Lmamam</a></li>
      <li><a href="#section_6">lorem Sinam </a></li>
    </ol></li>
    <li><a href="#section_7">Hello</a></li>
  </ol>
</div>

Upvotes: 2

Related Questions