title: CSS Nested Ordered Lists Counter Manipulation
body: <p>I would like to start <strong>nested ordered lists</strong> 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.</p>
  <p><strong>toc.html</strong> which is a <strong>table of contents</strong> would look like (using nested ordered lists):</p>
  <pre><code>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
  </code></pre>
  <p>On the <strong>assembly.html</strong> page, which is what <strong>2 Assembly</strong> would point to from the Table of Contents, I would like it to look like this:</p>
  <pre><code>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.
  </code></pre>
  <p>And on <strong>use.html</strong> I would want it to look like:</p>
  <pre><code>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.
  </code></pre>
  <p>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:</p>
  <pre><code>/css/main.css
  /toc.html
  /assembly.html
  /use.html
  /trouble-shooting.html
  /reference.html
  </code></pre>