Issues with different list style type for Parent and child using CSS List Counter-CodePudding

I am trying to using the CSS counter reset features for numbering on a website. The first level is supposed to be regular decimal (e.g. 1, 2, 3, 4) while the sub list is supposed to be upper roman (e.g I, II, III, IV, etc)

Here is my HTML markup

<div class="sample">
    <ol>
        <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur sodales varius. felis metus venenatis nibdimentum varius nibh ligula gravida ex. Duis interdum massa quis dolor lobortis, non mattis libero condimentum. Suspendisse tincidunt tincidunt mollis. Vivamus volutpat lacus eget sodales varius. Quisque iaculis fermentum orci, non condimentum orci auctor id.</li>
        <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur sodales varius. felis metus venenatis nibdimentum varius nibh ligula gravida ex. Duis interdum massa quis dolor lobortis, non mattis libero condimentum. Suspendisse tincidunt tincidunt mollis. Vivamus volutpat lacus eget sodales varius. Quisque iaculis fermentum orci, non condimentum orci auctor id.
            <ol>
                <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur elementum, felis metus venenatis.</li>
                <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur elementum, felis metus venenatis.</li>
                <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur elementum, felis metus venenatis.</li>
            </ol>
        </li>
    </ol>
</div>

And below is the CSS style:

.sample ul,
.sample ol {
    margin-left: 0;
    padding-right: 0;
    list-style-type: none;
    counter-reset: step-counter;
}
.sample ul > li,
.sample ol > li {
    counter-increment: step-counter;
    position: relative; 
    padding-left: 27px;
    margin-bottom: 30px;
}
.sample ul > li:before,
.sample ol > li:before {
    content: counter(step-counter, disc );
    position: absolute;
    left: 0;
}
.sample ul ul > li:before,
.sample ol ol > li:before {
    content: counters(step-counter, disc );
}
.sample ul > li:before {
    font-size: 24px;
    line-height: 24px;
}

.sample ol > li:before {
    content: counter(step-counter, decimal );
}

.sample ol ol > li:before {
    content: counters(step-counter, upper-roman ) ".";
}

I cannot get this to work as intended as the child level still display decimal number. Where am I getting it wrong?

I have created a fiddle here - https://jsfiddle.net/ajaxthemestudios/v6w1gkpt/4/

CodePudding user response：

There is a syntax error in your code change counters into counter

Change

.sample ol ol > li:before {
content: counters(step-counter, upper-roman ) ".";
}

into

.sample ol ol > li:before {
content: counter(step-counter, upper-roman ) ".";
}