Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Recursive bullet style on nested ordered lists

Tags:

html

css

I'd like to have ordered lists automatically styled based on its level as such:

1. Item
  a. Item
    i. Item
      1. Item
        a. Item
          i. Item
           ...

As you can see it is repeating this sequence: number > letter > roman numeral

I can do this through CSS as

ol {
    list-style-type:decimal;
}
ol > li > ol {
    list-style-type:lower-alpha;
}
ol > li > ol > li > ol {
    list-style-type:lower-roman;
}
ol > li > ol > li > ol > li > ol {
    list-style-type:decimal;
}
...

but this is tedious and I don't know how many levels I would need.

Is there a cleaner way of doing this through CSS?

I should note that I am doing this to style up an HTML editor and the generated HTML has this very basic structure:

<ol>
  <li>
    <ol>
      <li>
        ..

I have no control of the HTML and I can't add classes to it or anything.

like image 332
Katie Avatar asked Nov 05 '14 17:11

Katie


People also ask

How do I make nested bullets in markdown?

To nest one list within another, indent each item in the sublist by four spaces. You can also nest other elements like paragraphs, blockquotes or code blocks. You can mix ordered and unordered lists. To nest a paragraph or blockquote, indent by either 4 spaces or one tab.

How do I add nested bullets?

To do this, simply press 'shift + enter' on your keyboard when your cursor is at the end of a list item, and the next list item will be indented. There won't be any bullet (or number), on the indented line, so I recommend you add a dash '-' character, followed by a space and then your content.


1 Answers

It's not the prettiest solution, but we've decided to go with this one for now:
Thanks to @Vucko for suggesting that we didn't need the direct child selectors

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

This obviously works only up until the 9th level, but we don't think any list will go down this deep for our scenario.

If only there was some sort of :nth-level() selector...

like image 71
Katie Avatar answered Nov 05 '22 05:11

Katie