Example of hierarchical nested counters using ordered lists and SCSS. No JavaScript required. Supports different color for counter and proper indentation for multi-line bullet content.

nested-counter.html

<ol>
  <li>Level 1 list item
    <ol>
      <li>Level 2 list item</li>
      <li>Level 2 list item</li>
    </ol>
  </li>
  <li>Level 1 list item
    <ol class="lower-roman">
      <li>Level 2 list item</li>
      <li>Level 2 list item
        <ol class="lower-roman">
          <li>Level 3 list item</li>
          <li>Level 3 list item</li>
          <li>Level 3 list item</li>
        </ol>
      </li>
      <li>Level 2 list item
        <ol class="upper-roman">
          <li>Level 3 list item</li>
          <li>Level 3 list item</li>
          <li>Level 3 list item</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Level 1 list item
    <ol>
      <li>Level 2 list item
        <ol class="upper-alpha">
          <li>Level 3 list item</li>
          <li>Level 3 list item</li>
          <li>Level 3 list item
            <ol class="upper-alpha">
              <li>Level 4 list item</li>
              <li>Level 4 list item</li>
              <li>Level 4 list item</li>
            </ol>
          </li>
        </ol>
      </li>
      <li>Level 2 list item
        <ol class="lower-alpha">
          <li>Level 3 list item</li>
          <li>Level 3 list item
            <ol class="lower-alpha">
              <li>Level 4 list item</li>
              <li>Level 4 list item</li>
              <li>Level 4 list item</li>
            </ol>
          </li>
          <li>Level 3 list item</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Level 1 list item
    <br>
    <span>There is no list for this item</span>
  </li>
</ol>

nested-counter.scss

ol {
  counter-reset: section;
  
  > li {
    display: table;
    counter-increment: section;
    
    &:before {
      color: #76b900;
      content: counters(section, ".") ".0";
      display: table-cell;
      padding-right: 10px
    }
  }
 
  li ol > li:before {
    content: counters(section, ".");
	} 
	
  .lower-roman,        
  .upper-roman,
  .lower-alpha,
  .upper-alpha {
    counter-reset: styledSection;
    
    > li {
	    counter-increment: styledSection;
    }
  }

  .lower-roman > li:before {
    content: counters(styledSection, ".", lower-roman);
  }
  
  .upper-roman > li:before {
    content: counters(styledSection, ".", upper-roman);
  }
  
  .lower-alpha > li:before {
    content: counters(styledSection, ".", lower-alpha);
  }
  
  .upper-alpha > li:before {
    content: counters(styledSection, ".", upper-alpha);
  }
}