wrong numbering in table of contents in HTML

Question

I am trying to write Table of Contents using HTML in a file. The numbering that appears in my Table of Contents is flawed. How can I modify the following CSS and HTML so that the fourth bullet point in my Output is 4 instead of 3.4?

ol {
  counter-reset: item;
}

ol li {
  line-height: 30px;
}

ol ol li {
  line-height: 20px;
}

li {
  display: block;
}

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

<ol>
  <li>
    <a href="#lorem_ipsum">lorem ipsum</a>
  </li>
  <li>
    <a href="#set">Set</a>
  </li>
  <li>
    <a href="#title">Title</a>
  </li>
  <ol>
    <li>
      <a href="#Class">Class</a>
    </li>
    <li>
      <a href="#Something">Something</a>
    </li>
    <li>
      <a href="#action">Action</a>
    </li>
  </ol>
  <li>
    <a href="#table_of_references">Table of References</a>
  </li>
</ol>

Output

1. Lorem Ipsum
2. Set
3. Title
    3.1. Class
    3.2. Something
    3.3. Action
3.4. Table of References

_"wrong numbering in table of contents in HTML"_ - well, write _invalid_ HTML, get unexpected results. `ol` can not be a child of `ol`. — CBroe, May 25 '17 at 23:13

score 5 · Answer 1 · edited Jun 20 '20 at 09:12

As the comment said (@Jon P): Your HTML is invalid. You can not have ol as a direct descendant of ol it needs to be wrapped in a li.

To nesting lists properly, just move the sub ol inside the 3rd li, check the example below:

REF: https://developer.mozilla.org/en/docs/Web/HTML/Element/ol

ol {
  counter-reset: item;
}

ol li {
  line-height: 30px;
}

ol ol li {
  line-height: 20px;
}

li {
  display: block;
}

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

<ol>
  <li>
    <a href="#lorem_ipsum">lorem ipsum</a>
  </li>
  <li>
    <a href="#set">Set</a>
  </li>
  <li>
    <a href="#title">Title</a>
    <ol>
      <li>
        <a href="#Class">Class</a>
      </li>
      <li>
        <a href="#Something">Something</a>
      </li>
      <li>
        <a href="#action">Action</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="#table_of_references">Table of References</a>
  </li>
</ol>

Welcome to stackOverflow @user7623610, If any answer helps you [vote it up](http://meta.stackexchange.com/questions/173399/how-to-upvote-on-stack-overflow), If the answer is what you looking for mark it as [Correct answer](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) for the future readers. Thank you! — Dalin Huang, Jun 01 '17 at 04:14

score 1 · Answer 2 · answered May 25 '17 at 23:17

You're closing your LI tag too early after Title - move it below the OL section, like this:

<ol>
  <li>
    <a href="#lorem_ipsum">lorem ipsum</a>
  </li>
  <li>
    <a href="#set">Set</a>
  </li>
  <li>
    <a href="#title">Title</a>
  <ol>
    <li>
      <a href="#Class">Class</a>
    </li>
    <li>
      <a href="#Something">Something</a>
    </li>
    <li>
      <a href="#action">Action</a>
    </li>
  </ol>
  </li>
  <li>
    <a href="#table_of_references">Table of References</a>
  </li>
</ol>

wrong numbering in table of contents in HTML

2 Answers2