HTML nested list

nested list

ol {
  counter-reset: item;
}
ol li {
  display: block;
}
ol li:before {
  content: counters(item, ". ") ". ";
  counter-increment: item;
}

<ol>

    <li>Parent 1 <!-- Parent open li tag -->
        <ol> 
            <li>Child</li>
        </ol>
    </li> <!-- Parent close li tag -->

    <li>Parent 2</li>
</ol>

⚠️ The nested list must included into the parent <li> element!

❌ This will not work

<ol>
    <li>Parent 1</li>
    <ol> 
        <li>Child</li>
    </ol>
    <li>Parent 2</li>
</ol>

Created: 06.08.2021