CODEWITHSUNDEEP
htmlcssstyleshtml-lists
user2002382
user2002382

Reputation: 111

Using css to format li tags within ol tags

I want to write a style sheet that will cause the li elements within any ol element to be numbered in an outline style:

the top-level li elements using uppercase Roman numerals, the next level uppercase letters, the next level lowercase Roman numerals, then lowercase letters, and decimal numerals at the fifth level.

This is my attempt at it, but the result is all the levels showing with upper-roman styling.

Thank you in advance.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
    ol > li {list-style: upper-roman}
    ol > li > li {list-style: upper-alpha}
    ol > li > li > li {list-style: lower-roman}
    ol > li > li > li > li {list-style: lower-alpha}
    ol > li > li > li > li > li {list-style: decimal}
    </style>
  </head>
  <body>
    <ol>
      <li>level 1
         <li>level 2
            <li>level 3
               <li>level 4
                  <li>level 5</li>
               </li>
            </li>
         </li>
       </li>
    </ol>
  </body>
</html>

Upvotes: 1

Views: 2155

Answers (4)

John Hicks
John Hicks

Reputation: 41

You are nesting ordered lists (<ol>), not list items (<li>), so try this:

ol { list-style-type: upper-roman; }   
ol ol { list-style-type: upper-alpha; } 
ol ol ol {   list-style-type: decimal; } 
ol ol ol ol { list-style-type: lower-alpha; } 
ol ol ol ol ol { list-style-type: lower-roman; }

Upvotes: 1

Abhas
Abhas

Reputation: 116

Adding IDs and Classes to your structure will help better.

Upvotes: 0

bsoist
bsoist

Reputation: 785

Try changing this

ol > li > li {list-style: upper-alpha}

to this

ol > li > ol > li {list-style: upper-alpha}

and this

 <li>level 1
     <li>level 2

to

    <li>level 1
     <ol><li>level 2

etc.

Upvotes: 0

hjpotter92
hjpotter92

Reputation: 80649

For the reason mentioned in my comment, you need to nest ol tag as well. Here's a working fiddle to show.

CSS

ol > li {
    list-style: upper-roman
}
ol > li li {
    list-style: upper-alpha
}
ol > li li li {
    list-style: lower-roman
}
ol > li li li li {
    list-style: lower-alpha
}
ol > li li li li li {
    list-style: decimal
}

HTML

<body>
    <ol>
        <li>level 1
            <ol>
                <li>level 2
                    <ol>
                        <li>level 3
                            <ol>
                                <li>level 4
                                    <ol>
                                        <li>level 5</li>
                                    </ol>
                                </li>
                            </ol>
                        </li>
                    </ol>
                </li>
            </ol>
        </li>
    </ol>
</body>

Upvotes: 2

Related Questions