I'm created an ordered list and changing the code so that I can set the list styling. I've done it in a text box inside a toggle panel, a standard text box outside the toggle panel, and raw html outside the toggle panel. 

<ol style="list-style:lower-alpha">

I can see the correct styling being previewed in the backend page editor. When I preview the page or update live the list styling is overwritten by something.

Any help is appreciated. Best,

Hey Tahir, 

When you inspect the page the html shows that the style is "list-style: lower-alpha;" but the ordered list does not display correct. 

The first 3 items should be lower-alpha or "a", "b", "c". See the red circles on the image. The last three items are correct and are 1, 2, 3. See the blue circle.

The confusion might be that the text I've posted after each ordered list number contains the letters and number that should be the correct list headings.

I need to create ordered lists with legal text so the list styles of each section must be correct. I'm going off this list below located at https://rogerwilliamsmedia.com/styling-ordered-lists-with-letters-in-wordpress/.

• upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
• lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
• upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
• lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)

Thanks Tahir, 

Will I be able switch back and forth between the different styles of ordered lists on the same page? Like in the same list I'll need to use all 4 of the below styles plus the default style (1, 2, 3, 4, 5, etc.)

• upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.)
• lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)
• upper-roman The marker is upper-roman (I, II, III, IV, V, etc.)
• lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)

Thanks Tahir!

Just to be super clear though. On the same page - I can have three separate lists that use different list styles?

List One
1.
    a.
        A.
            i.
List Two
a.
    1.
        i.
            A.
List Three
i.
    a.
        1.
            A.

Or can I only have the one list style per page that I enter into the custom css box?

Thanks again!!

I follow the css to add and the extra class to assign. I should just have to add the different extra class names, e.g. "#list-1", into the extra class names sections on say a text box?

Best wishes. Please take care and be safe,

Adding the css extra class name as follows was the only way I could get it to work:

/* Alabama */
.list-al ol li {
    list-style: lower-alpha;
    list-style-position: outside;
}
.list-al ol li ol li {
    list-style: decimal;
    list-style-position: outside;
}
/* Arkansas */
.list-ar ol li {
    list-style: lower-alpha;
    list-style-position: outside;
}
.list-ar ol li ol li {
    list-style: decimal;
    list-style-position: outside;
}
.list-ar ol li ol li ol li {
    list-style: upper-alpha;
    list-style-position: outside;
}
.list-ar ol li ol li ol li ol li {
    list-style: lower-roman;
    list-style-position: outside;
}

I could not get anything to work with the extra class name as "#list-al" in the css. I had to use ".list-al". I'm not sure the difference. I watched an extra class name video on youtube and that's what they used so I tried it. Seems to be working now. Thanks,