CSS table of contents - Counter won't reset after nested lists

Question

I have this HTML/CSS table of contents based on Creating table of contents in html. But how do I fix the automatic numbering so it resets properly after nested lists?

Current result:

1 Lorem
2 Ipsum
     2.1 Dolor
     2.2 Sit
           2.2.1 Amet
           2.2.2 Consectetur
2.3 Adipiscing

Desired result:

1 Lorem
2 Ipsum
     2.1 Dolor
     2.2 Sit
           2.2.1 Amet
           2.2.2 Consectetur
3 Adipiscing

ol {
  counter-reset: item
}

li {
  display: block
}

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

<ol>
  <li>Lorem</li>
  <li>Ipsum</li>
  <ol>
    <li>Dolor</li>
    <li>Sit</li>
    <ol>
      <li>Amet</li>
      <li>Consectetur</li>
    </ol>
  </ol>
  <li>Adipiscing</li>
</ol>

score 3 · Accepted Answer · answered Aug 27 '17 at 09:29

Just take care of your markup (only lis inside ols) - a sub-list can be something like this:

  <li>Sit
    <ol>
      <li>Amet</li>
      <li>Consectetur</li>
    </ol>
  </li>

See demo below:

ol {
  counter-reset: item
}

li {
  display: block
}

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

<ol>
  <li>Lorem</li>
  <li>Ipsum
    <ol>
      <li>Dolor</li>
      <li>Sit
        <ol>
          <li>Amet</li>
          <li>Consectetur</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Adipiscing</li>
</ol>

CSS table of contents - Counter won't reset after nested lists

1 Answers1