JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<ol id = "root">
    <li>List item two with subitems (this should not be numbered):
        <ol id = "toc0">
            <li>Subitem 1 (This should be numbered 1)</li>
            <li>Subitem 2 (This should be 2)</li>
              <ol>
                <li> subitem  (this should be 2.1)</li>  
                <li> subitem  (this should be 2.2)</li>  
                  <ol>
                    <li> subitem (This should be 2.2.1)</li>
                    <li> subitem (This should be 2.2.2)</li>
                  </ol>
              </ol>
            <li>Subitem 3 (This should be 3)</li>
            <li>Subitem 4 (This should be 4)</li>
        </ol>
    </li>
</ol>

CSS

/* li {

    list-style-type: none;

  } */
  
  ol:not(#root) li ol {
    counter-reset: section; 
    list-style-type: none;
  }
  
  ol:not(#root) li ol li::before {
    counter-increment: section;            
    content: counters(section, ".") " ";   
  }