It is easy to get the correct count if ol inside ol the format looks like below
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
</ol>
</li>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
</ol>
</li>
<li>item</li>
</ol>
However, if I want to put ul inside ol I can't get counter works correctly
<ol>
<li>item</li>
<li>item
<ul>
<li>item</li>
<li>item</li>
<li>item
</ul>
</li>
<li>item</li>
<li>item</li>
<li>item
<ul>
<li>item</li>
<li>item</li>
<li>item
</ul>
</li>
<li>item</li>
</ol>
Is there a way to avoid counting ul ?
There's a very simple way to fix it. Just use a CSS child selector (>
) so the count only includes <li>
s that are children of the <ol>
.
ol > li::before {
counter-increment: my;
content: counter(my) ;
margin-right: 10px;
}