title: Reseting CSS counter for nested lists formatted as 1.1, 1.2,
body: <p>I'm struggling to find a way in the CSS that I have...</p>
  
  <p><a href="https://jsfiddle.net/Lh0kLvj7/" rel="nofollow noreferrer">https://jsfiddle.net/Lh0kLvj7/</a></p>
  
  <pre><code>    ol.content {
    counter-reset: item 1;
    list-style: none;
  }
  
  li.content:before {
    counter-increment: item;
    content: counter(item)". ";
  }
  
  ol.content ol.content li.content:before {
    counter-increment: item;
    content: counters(item, ".") " ";
  }
  
  &lt;p&gt;&lt;span style="font-size: 24px;"&gt;On this page:&lt;/span&gt;&lt;/p&gt;
  
  &lt;ol class="content"&gt;
    &lt;li class="content"&gt;&lt;a href="#"&gt;section TWO&lt;/a&gt;
  
      &lt;ol class="content"&gt;
        &lt;li class="content"&gt;&lt;a href="#section2-1"&gt;TWO point *ONE* (not 2.2!)&lt;/a&gt;&lt;/li&gt;
        &lt;li class="content"&gt;&lt;a href="#section2-2"&gt;TWO point *TWO*&lt;/a&gt;&lt;/li&gt;
        &lt;li class="content"&gt;&lt;a href="#section2-3"&gt;TWO point *THREE*&lt;/a&gt;&lt;/li&gt;
        &lt;li class="content"&gt;&lt;a href="#section2-4"&gt;TWO point *FOUR*&lt;/a&gt;
  
          &lt;ol class="content"&gt;
            &lt;li class="content"&gt;TWO point *FOUR* point *ONE* (not 2.5.2!)&lt;/li&gt;
            &lt;li class="content"&gt;Title...&lt;/li&gt;
            &lt;li class="content"&gt;Title...&lt;/li&gt;
            &lt;li class="content"&gt;Title...&lt;/li&gt;
            &lt;li class="content"&gt;Title...&lt;/li&gt;
          &lt;/ol&gt;
        &lt;/li&gt;
        &lt;li class="content"&gt;&lt;a href="#section2-5"&gt;TWO point *FIVE*&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>
  
  <p>...to first start a parent counter sequence at a number that is not one (i.e., section 2 in the fiddle above), but have the nested lists actually start at .1.  I'm not great at CSS so it may be something simple that I'm missing. In the fiddle above you'll see that the HTML displays incorrectly...</p>
  
  <p>2.</p>
  
  <p>2.<strong>2</strong></p>
  
  <p>2.3</p>
  
  <p>2.4</p>
  
  <p>2.5</p>
  
  <p>2.5.<strong>2</strong></p>
  
  <p>when I need...</p>
  
  <p>2.</p>
  
  <p>2.<strong>1</strong></p>
  
  <p>2.3</p>
  
  <p>2.4</p>
  
  <p>2.<strong>4.1</strong></p>
  
  <p>I definitely need to be able to start at any number for the initial/parent so I'm assuming I will have to use counter-reset: item 1;, counter-reset: item 2;, counter-reset: item 4;, etc. somewhere, but then I need to start nested lists should be reset to start at 1.</p>