I want to create an ordered list that looks like this:
1. Item_1
2. Item_2:
a. Subitem_1
b. Subitem_2:
I. Sub-Subitem_1
II. Sub-Subitem_2
c. Subtiem_3
3. Item 3
i.e. sub-lists should use alphabets/Roman Numbers or other such notations for numbering.
I tried nesting <ol>
tags but that plainly numbered the sub-lists.
Is there a way of doing this using only HTML?
This is certainly possible, given the following HTML:
<ol>
<li>Item_1</li>
<li>Item_2:
<ol>
<li>Subitem_1</li>
<li>Subitem_2:
<ol>
<li>Sub-Subitem_1</li>
<li>Sub-Subitem_2</li>
</ol></li>
<li>Subitem_3</li>
</ol></li>
<li>Item 3</li>
</ol>
And the CSS:
ol {
list-style-type: decimal;
}
ol > li > ol {
list-style-type: lower-alpha;
}
ol > li > ol > li > ol {
list-style-type: upper-roman;
}
JS Fiddle demo.
Or, you can be less strict about the specificity of the CSS selectors:
ol {
list-style-type: decimal;
}
ol ol {
list-style-type: lower-alpha;
}
ol ol ol {
list-style-type: upper-roman;
}
JS Fiddle demo.
References:
list-style-type
.<ol type="1|a|A|i|I">
1 Default. Decimal numbers (1, 2, 3, 4)
a Alphabetically ordered list, lowercase (a, b, c, d)
A Alphabetically ordered list, uppercase (A, B, C, D)
i Roman numbers, lowercase (i, ii, iii, iv)
I Roman numbers, uppercase (I, II, III, IV)
http://www.w3schools.com/tags/att_ol_type.asp
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With