Using a custom ordered list within a built-in ordered list

Question

I made an ordered list with upper-alpha , and then a custom list with a bracket after the number. Then I want to make a sublist using list-style-type: lower-roman but it doesn't work. Is there a way to stop the double listing? Creating my lower-roman custom list doesn't look good.

Problem seemed to occur only when I use a built-in list, and then a custom list, and then a built-in list again.

The CSS below doesn't work:

ol.listing {
    list-style-type: upper-alpha;
}
ol.listing li ol {
    list-style-type: none;
    counter-reset: list;
}
ol.listing li ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}
ol.listing li ol li ol{
    list-style-type: lower-roman;
}

However, custom lower-roman seems to align roman to the left, instead of align right as in the list-style-type:lower-roman :

ol.listing {
    list-style-type: upper-alpha;
}
ol.listing li ol {
    list-style-type: none;
    counter-reset: list;
}
ol.listing li ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}
ol.listing li ol li ol {
    list-style-type: none;
    counter-reset: roman;
}
ol.listing li ol li ol> li:before {
    counter-increment: roman;
    content: counter(roman, lower-roman)". "
}

Sample HTML code to test with:

<ol class="listing">
    <li>Beverage
        <ol>
            <li>Cold Beverage
                <ol>
                    <li>Apple Juice</li>
                    <li>Sky Juice</li>
                    <li>Milk</li>
                </ol>
            </li>
            <li>Hot Beverage
                <ol>
                    <li>Coffee</li>
                    <li>Tea</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>Food</li>
</ol>

Answer 1

You need to increase a bit the specifity of your selector where counter is inserted

ol.listing> li >ol > li:before {
    counter-increment: list;
    content: counter(list)") "
}

 ol.listing { list-style-type: upper-alpha; } ol.listing li ol { list-style-type: none; counter-reset: list; } ol.listing> li >ol > li:before { counter-increment: list; content: counter(list)") " } ol.listing li ol li ol{ list-style-type: lower-roman; } 

 <ol class="listing"> <li>Beverage <ol> <li>Cold Beverage <ol> <li>Apple Juice</li> <li>Sky Juice</li> <li>Milk</li> </ol> </li> <li>Hot Beverage <ol> <li>Coffee</li> <li>Tea</li> </ol> </li> </ol> </li> <li>Food</li> </ol> 

or size your pseudo and reset text-align:

ol.listing li ol li ol> li:before {
  width: 1.5em;/* size*/
  text-align: right;/* reset */
  display: inline-block;/* make it a box sizeable */
    counter-increment: roman;
    content: counter(roman, lower-roman)". "
}

 ol.listing { list-style-type: upper-alpha; } ol.listing li ol { list-style-type: none; counter-reset: list; } ol.listing li ol > li:before { counter-increment: list; content: counter(list)") " } ol.listing li ol li ol { list-style-type: none; counter-reset: roman; } ol.listing li ol li ol> li:before { width: 1.5em; text-align: right; display: inline-block; counter-increment: roman; content: counter(roman, lower-roman)". " } 

 <ol class="listing"> <li>Beverage <ol> <li>Cold Beverage <ol> <li>Apple Juice</li> <li>Sky Juice</li> <li>Milk</li> </ol> </li> <li>Hot Beverage <ol> <li>Coffee</li> <li>Tea</li> </ol> </li> </ol> </li> <li>Food</li> </ol>