CSS Nested Ordered Lists Counter Manipulation - html

Question

I would like to start nested ordered lists with specific numbers while keeping numbering normal (based on the first starting number) for nested list items. Rather than send people down the wrong path and show the numerous versions of scripts I have tried thus far, I am just going to show my desired end state and ask how to get there.
toc.html which is a table of contents would look like (using nested ordered lists):
Table of Contents
1 Introduction
2 Assembly
2.1 Preparation
2.1.1 Space
2.1.2 Tools
2.1.3 Parts
2.2 Assembly
2.2.1 Build It
3 Use
3.1 Defaults
3.2 Customizations
3.2.1 Safety
3.2.1 Insanity
4 Trouble-Shooting
5 Reference
On the assembly.html page, which is what 2 Assembly would point to from the Table of Contents, I would like it to look like this:
Blah blah blah, fake latin goes here.
2 Assembly
2.1 Preparation
2.1.1 Space
2.1.2 Tools
2.1.3 Parts
2.2 Assembly
2.2.1 Build It
Body of this page, along with more fake latin, goes here.
And on use.html I would want it to look like:
Blah blah blah, fake latin goes here.
3 Use
3.1 Defaults
3.2 Customizations
3.2.1 Safety
3.2.1 Insanity
Body of this page, along with more fake latin, goes here.
How do I accomplish this using only HTML and CSS? I do not want javascript or anything other than HTML and CSS. My file structure is:
/css/main.css
/toc.html
/assembly.html
/use.html
/trouble-shooting.html
/reference.html

Answer 1

Declare the li elements as block-elements. Then you can make use of the conter-resetattribute and re-add the counter through pseudo-elements:
ol {
counter-reset: item;
}
li {
display: block;
}
li:before {
content: counters(item, ".") " ";
counter-increment: item;
}
<ol>
<li>Introduction</li>
<li>Assembly
<ol>
<li>Preparation
<ol>
<li>Space</li>
<li>Tools</li>
<li>Parts</li>
</ol>
</li>
<li>Assembly
<ol>
<li>Build It</li>
</ol>
</li>
</ol>
</li>
<li>Use
<ol>
<li>Defaults</li>
<li>Customizations
<ol>
<li>Safety</li>
<li>Insanety</li>
</ol>
</li>
</ol>
</li>
<li>Trouble-Shooting</li>
<li>Reference</li>
</ol>

Answer 2

It was my hope there would be some way to nest counters, or to force a counter to only reset the initial count item. Based on the answer from #tacoshy in which he states that a server-sided solution like PHP is required to call a counter listing from a database, and that there is no other easy HTML and CSS solution, I decided to just use a garbage workaround. For sure there is a more elegant way to do this:
I created items within CSS which I could use to hide things.
li.hideme {
visibility:hidden;
}
#coverup01 {
position:relative;
top: -60px;
}
#coverup02 {
position:relative;
top: -75px;
}
Then, I used the basic HTML CSS solution for nested ordered lists, and added the references to the above. On the assembly.html page I did this:
<ol>
<li class="hideme">Introduction</li>
<span id="coverup01">
<li>Assembly
<ol>
<li>Preparation
<ol>
<li>Space</li>
<li>Tools</li>
<li>Parts</li>
</ol>
</li>
<li>Assembly
<ol>
<li>Build It</li>
</ol>
</li>
</ol>
</li>
<li>Use
<ol>
<li>Defaults</li>
<li>Customizations
<ol>
<li>Safety</li>
<li>Insanity</li>
</ol>
</li>
</ol>
</li>
<li>Trouble-Shooting</li>
<li>Reference</li>
</span>
</ol>
And on the use.html page I did this:
<ol>
<li class="hideme">Introduction</li>
<li class="hideme">Assembly</li>
<span id="coverup02">
<li>Use
<ol>
<li>Defaults</li>
<li>Customizations
<ol>
<li>Safety</li>
<li>Insanity</li>
</ol>
</li>
</ol>
</li>
<li>Trouble-Shooting</li>
<li>Reference</li>
</span>
</ol>
The coverup01 and coverup02 ID selectors are just for my own use, to pull the visible list up. If you expect a solid responsive design with this, you will want to edit each screen size accordingly. This works for a small list. For a larger list, this may be cumbersome.
This returned the results I was trying to find. I did not want to use garbage code, but if there is no supported solution, then a workaround must suffice for now.
As I am typing this ... I may be able to put the coverup stuff into the li.hideme class, which would simplify things considerably. Not sure if CSS allows for positioning invisible objects, but we shall see [pun]....
This is the solution I have used, and it seems to be working just fine.