Link to home
Start Free TrialLog in
Avatar of sabecs
sabecs

asked on

How to format numbers and letters in nested lists

Hi,
Is there a way to format nested lists as per below.

for example: 2.1 for first level nested list and a) for second level nested list

Thanks

<!DOCTYPE html>
<html>
<body>
<ol>
    <li>List item one</li>
    <li>List item two with subitems:</li>
    <ol>
        <li>Subitem 1 - show as 2.1</li>
        <li>Subitem 2 - show as 2.2</li>
        <li>Subitem list with 2 subitems - show as 2.3</li>
             <ul>
                <li>Subitem 1 - show as a)</li>
                <li>Subitem 2 - show as b)</li>
            </ul>
        <li>Subitem 4 - show as 2.4</li>
    </ol>
    <li>List item three</li>
    <li>List item four with subitems:</li>
    <ol>
        <li>Subitem 1 -show as 4.1</li>
        <li>Subitem 2 - show as 4.2</li>
        <li>Subitem 3 -show as 4.3</li>
        <li>Subitem 4 - show as 4.4</li>
    </ol>
    <li>Final list item</li>
</ol>
</body>
</html>

Open in new window

Avatar of Miguel Oz
Miguel Oz
Flag of Australia image

You could use the following css style in your page:
<style>
ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
ul {
    counter-reset: item;
	list-style-type: lower-alpha;
}

ul > li {
    counter-increment: item;
}
</style>

Open in new window

Notice that by default all lists are numeric, thus I changed the ul type to lower-alpha the get a,b,c,d
Avatar of sabecs
sabecs

ASKER

Thanks Miguel for your help, but it does not produce the results I require.

1.List item one
2.List item two with subitems:
2.1. Subitem 1 - show as 2.1
2.2. Subitem 2 - show as 2.2
2.3. Subitem list with 2 subitems - show as 2.3
◾Subitem 1 - show as a)
◾Subitem 2 - show as b)
2.6. Subitem 4 - show as 2.4
3.List item three
4.List item four with subitems:
2.1. Subitem 1 -show as 4.1
2.2. Subitem 2 - show as 4.2
2.3. Subitem 3 -show as 4.3
2.4. Subitem 4 - show as 4.4
5.Final list item
Avatar of sabecs

ASKER

I have tested on IE 11 & Firefox 51.0.1.

the nested list inside list four displays sub items with numbers 2.1, 2.2, 2.3 & 2.4 but it should be 4.1, 4.2, 4.3 & 4.4
I hope that makes sense and thanks for your help.
ASKER CERTIFIED SOLUTION
Avatar of Miguel Oz
Miguel Oz
Flag of Australia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sabecs

ASKER

Thanks for your help, very much appreciated.