Multiple subdivisions inside <ol>

#1

Hi coders, quick question here.
I’m currently working on the ‘Technical documentation page challenge’, trying to make something similar to this:

But, found myself stuck at the navbar, because I cant replicate the subdivisions.
I’ve managed to code up to point 2.4.5, which is “Engine configuration”, with this codes:

 <nav id="navbar">
   <header>Contents</header>
   <ol>
     <li>Terminology</li>
     <li>History</li>
     <ol>
       <li>Antiquity</li>
       <li>Medieval</li>
       <li>Industrial Revolution</li>
       <li>Automobiles</li>
       <ol>
         <li>Horizontally opposed pistons</li>
         <li>Advancement</li>
         <li>Increasing power</li>
         <li>Combustion efficiency</li>
         <li>Engine configuration</li>
       </ol>
     </ol>

And this for css

ol {
  counter-reset: section;                /* Creates a new instance of the
                                            section counter with each ol
                                            element */
  list-style-type: none;
}

li::before {
  counter-increment: section;            /* Increments only this instance
                                            of the section counter */
  content: counters(section, ".") " ";/* Combines the values of all instances
                                            of the section counter, separated
                                            by a period */
}

All that code got me something like this:

Contents

  1. Terminology
  2. History

2.1. Antiquity
2.2. Medieval
2.3. Industrial Revolution
2.4. Automobiles

2.4.1. Horizontally opposed pistons
2.4.2. Advancement
2.4.3. Increasing power
2.4.4. Combustion efficiency
2.4.5. Engine configuration

Now, when I want to move to point 3 by closing the corresponding tags , I can only reach 2.5. Tried starting a new ol (something I don’t really like), but for some reason the “start” attribute isn’t recognised, so that list starts on a 1 . How can I solve this? I’ve only been coding for a month, sorry in advance if this has been asked already.

#2

The only child elements of an ol element, should be li elements. You have tried to nest other ol element as a children of the main ol element. To resolve this issue, you need to nest the lower level ol elements inside the same li elements of the titles which would become the next level.

 <nav id="navbar">
   <header>Contents</header>
   <ol>
     <li>Terminology</li>
     <li>History
       <ol>
         <li>Antiquity</li>
         <li>Medieval</li>
         <li>Industrial Revolution</li>
         <li>Automobiles
           <ol>
             <li>Horizontally opposed pistons</li>
             <li>Advancement</li>
             <li>Increasing power</li>
             <li>Combustion efficiency</li>
             <li>Engine configuration</li>
           </ol>
         </li>
       </ol>
     </li>
   </ol>
 </nav>
#3

Thank you, very much. Once again, sorry for the dumb questions. Trying not to bring many here, but sometimes I can’t google myself out of them.

#4