CSS Nested Ordered Lists Counter Manipulation

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

score 3 · Answer 1 · answered Feb 28 '22 at 01:47

3

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>

answered Feb 28 '22 at 01:47

tacoshy

10,642
5
17
34

This is great for the Table of Contents page @tacoshy , but what would the code look like for the other pages? When I do this, the other pages all start counting at 1 again, which is exactly what the `counter-reset: item;` is telling the browser to do. When I try forcing the matter with a `counter-reset: item 2;` or `counter-reset: item 3;` it works for the first item but nested items also start at that hard-coded value. So, what would the code look like to get the results from my original post for the assembly.html and use.html pages? – Robert J Turner Feb 28 '22 at 16:37
it shouldn't matter when the code is parsed into one file. Otherwise you need a server-sided solution like PHp to call the counter lsiting froma data-base. there is no other easy HTML and CSS solution as both languages do not work across multiple files that are not parsed as a single one. – tacoshy Feb 28 '22 at 22:17
So if I want my **nested ordered list** to start at 3, there is no HTML + CSS solution to do this? – Robert J Turner Mar 01 '22 at 00:48

score 0 · Accepted Answer · answered Mar 03 '22 at 19:23

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.

CSS Nested Ordered Lists Counter Manipulation

2 Answers2

Related