'Dynamically continue list numbering across two different ordered list based on depths with CSS

I have two different ordered lists that are split by a figure tag.

I'd like to continue the numbering across the lists based on the depth classes, and only reset the numbering by the parent depth (e.g. .depth1 resets the numbering for .depth2 + .depth3)

Right now, the new ordered list is restarting the depth at a. and not c. like I want. I need the numbering to be dynamic and can't use hard coded values to reset the list.

div.container {
    counter-reset: ol1 ol2 ol3;
}

li {
    list-style-type: none;
}

li.depth1 {
    counter-increment: ol1;
    counter-reset: ol2;
}

li.depth2 { 
    counter-increment: ol2;
    padding-left: 30px; 
    counter-reset: ol3;
}

li.depth3 { 
    counter-increment: ol3;
    padding-left: 60px; 
}

li.depth1:before {
  content: counter(ol1) ". "   !important;
}

li.depth2:before {
  content: counter(ol2, lower-alpha) ". "  !important;
}

li.depth3:before {
     content: counter(ol3, lower-roman) ". "  !important;
}

<div class="container">
    <ol>
        <li class="depth1">item</li>
        <li class="depth2">item</li>
        <li class="depth2">item</li>
            <li class="depth3">item</li>
            <li class="depth3">item</li>
    </ol>
    <figure><img width="100" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/red-apple.png"/></figure>
    <ol>
            <li class="depth2">item</li>
            <li class="depth2">item</li>
        <li class="depth1">item</li>
            <li class="depth2">item</li>
            <li class="depth2">item</li>
                <li class="depth3">item</li>
                <li class="depth3">item</li>
        <li class="depth2">item</li>
        <li class="depth1">item</li>
    </ol>
</div>

css

Solution 1:^[1]

First solution

<li class="depth2 depth2_continue">item</li>

li.depth2.depth2_continue { 
   counter-set: ol2 3;
}

div.container {
    counter-reset: ol1 ol2 ol3;
}

li {
    list-style-type: none;
}

li.depth1 {
    counter-increment: ol1;
    counter-reset: ol2;
}

li.depth2 { 
    counter-increment: ol2;
    padding-left: 30px; 
    counter-reset: ol3;
}

li.depth2.depth2_continue { 
   counter-set: ol2 3;
}

li.depth3 { 
    counter-increment: ol3;
    padding-left: 60px; 
}

li.depth1:before {
  content: counter(ol1) ". "   !important;
}

li.depth2:before {
  content: counter(ol2, lower-alpha) ". "  !important;
}

li.depth3:before {
     content: counter(ol3, lower-roman) ". "  !important;
}

<div class="container">
    <ol>
        <li class="depth1">item</li>
        <li class="depth2">item</li>
        <li class="depth2">item</li>
            <li class="depth3">item</li>
            <li class="depth3">item</li>
    </ol>
    <figure><img width="100" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/red-apple.png"/></figure>
    <ol>
            <li class="depth2 depth2_continue">item</li>
            <li class="depth2">item</li>
        <li class="depth1">item</li>
            <li class="depth2">item</li>
            <li class="depth2">item</li>
                <li class="depth3">item</li>
                <li class="depth3">item</li>
        <li class="depth2">item</li>
        <li class="depth1">item</li>
    </ol>
</div>

Second solution

Before:

    </ol>
    <figure><img width="100" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/red-apple.png"/></figure>
    <ol>

After:

    <figure><img width="100" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/red-apple.png"/></figure>

div.container {
    counter-reset: ol1 ol2 ol3;
}

li {
    list-style-type: none;
}

li.depth1 {
    counter-increment: ol1;
    counter-reset: ol2;
}

li.depth2 { 
    counter-increment: ol2;
    padding-left: 30px; 
    counter-reset: ol3;
}

li.depth3 { 
    counter-increment: ol3;
    padding-left: 60px; 
}

li.depth1:before {
  content: counter(ol1) ". "   !important;
}

li.depth2:before {
  content: counter(ol2, lower-alpha) ". "  !important;
}

li.depth3:before {
     content: counter(ol3, lower-roman) ". "  !important;
}

<div class="container">
    <ol>
        <li class="depth1">item</li>
        <li class="depth2">item</li>
        <li class="depth2">item</li>
            <li class="depth3">item</li>
            <li class="depth3">item</li>
    <figure><img width="100" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/red-apple.png"/></figure>
            <li class="depth2">item</li>
            <li class="depth2">item</li>
        <li class="depth1">item</li>
            <li class="depth2">item</li>
            <li class="depth2">item</li>
                <li class="depth3">item</li>
                <li class="depth3">item</li>
        <li class="depth2">item</li>
        <li class="depth1">item</li>
    </ol>
</div>

Solution 2:^[2]

From OP: I ended up using a counter-set: counter 0 instead of a counter-reset to restart the numbering after the previous depth. This gets the list to behave as intended.

The only downside here is that Safari doesn't support counter-set yet. Given that Safari just defaults to the counter-reset behavior, I decided this is an acceptable solution because it covers most other major browsers like Chrome, Firefox, Edge.

Here's the final code:

div.container {
    counter-reset: ol1 ol2 ol3;
}

li {
    list-style-type: none;
}

li.depth1 {
    counter-increment: ol1;
    counter-set: ol2 0;
}

li.depth2 { 
    counter-increment: ol2;
    padding-left: 30px; 
    counter-set: ol3 0;
}

li.depth3 { 
    counter-increment: ol3;
    padding-left: 60px; 
}

li.depth1:before {
  content: counter(ol1) ". ";
}

li.depth2:before {
  content: counter(ol2, lower-alpha) ". ";
}

li.depth3:before {
     content: counter(ol3, lower-roman) ". ";
}

<div class="container">
    <ol>
        <li class="depth1">item</li>
        <li class="depth2">item</li>
        <li class="depth2">item</li>
            <li class="depth3">item</li>
            <li class="depth3">item</li>
    </ol>
    <figure><img width="100" src="http://s3.amazonaws.com/pix.iemoji.com/images/emoji/apple/ios-12/256/red-apple.png"/></figure>
    <ol>
            <li class="depth2">item</li>
            <li class="depth2">item</li>
        <li class="depth1">item</li>
            <li class="depth2">item</li>
            <li class="depth2">item</li>
                <li class="depth3">item</li>
                <li class="depth3">item</li>
        <li class="depth2">item</li>
        <li class="depth1">item</li>
    </ol>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Andy Cook

'Dynamically continue list numbering across two different ordered list based on depths with CSS

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]