How to reset ordered list numbering in CSS

Question

How can I reset the numbering for nested ordered lists.

Running this snippet, give me an output like this:

• List 1
• List 2

• List 3

  1. List 1
  2. List 2

  3. List 3

     • List 1
     • List 2

     • List 3

       3.1. List 1
       3.2. List 2
       3.3. List 3
               3.3.1. List 1
               3.3.2. List 2
               3.3.3. List 3
                       3.3.3.1. List 1
                       3.3.3.2. List 2
                       3.3.3.3. List 3
       

I want 3.1 to start with 1. How can I do this? Do I need to use multiple counters? or a single one will do? I'm not really used in using css counters. The code works if it's a series of nested ordered list but when there is an unordered list inside it starts to fail. It still continues the numbering from the previous ordered list.

ol {
    counter-reset: item 0;
    list-style: none;
}
ul {
    counter-reset: item "";
}
ul:first-child>li {
    counter-reset: item "";
}
ul>li:before {
    content: " ";
    margin-right: 1em;
}
ol ul li:last-child {
    counter-reset: item "";
}
ol>li:before {
    counter-increment: item;
    content: counters(item, ".")".  ";
}

<ul class="ul">
    <li class="li">List 1</li>
    <li class="li">List 2</li>
    <li class="li">List 3
        <ol class="ol">
            <li class="li">List 1</li>
            <li class="li">List 2</li>
            <li class="li">List 3<ul class="ul">
                    <li class="li">List 1</li>
                    <li class="li">List 2</li>
                    <li class="li">List 3
                        <ol class="ol">
                            <li class="li">List 1</li>
                            <li class="li">List 2</li>
                            <li class="li">List 3
                                <ol class="ol">
                                    <li class="li">List 1</li>
                                    <li class="li">List 2</li>
                                    <li class="li">List 3
                                        <ol class="ol">
                                            <li class="li">List 1</li>
                                            <li class="li">List 2</li>
                                            <li class="li">List 3</li>
                                        </ol>
                                    </li>
                                </ol>
                            </li>
                        </ol>
                    </li>
                </ul>
            </li>
        </ol>
    </li>
</ul>

Edit: I wasn't still able to do this, even with multiple reset counter. Is there any hope for this?

Answer 1

You can view my case:

We just need to reset at the first child

.tos ol > li {
    counter-increment: listNumbering;
    list-style: none;
}
.tos ol > li:before {
    content: counter(listNumbering) '. ';
}
.tos ol > li:first-child {
    counter-reset: listNumbering;
}