Nested Orderd List with combination of numbers, alphatets and roman numerals for numbering?

Question

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?

Lipski

see this: w3schools.com/tags/att_ol_type.asp – Fadden

@Fadden It says on the page that The type attribute of the <ol> element is no longer deprecated in HTML5.. It seems like it was declared deprecated in HTML 4. Is it possible it could be deprecated again? – Lipski

well, HTML is very forgiving, even deprecated, it will still work for a long time. – Fadden

It will still work, but why use something that's deprecated when the same functionality can be implemented more reliably, and in a manner that's more future-proof, using CSS? Also, for documentation, please don't rely upon W3Schools (they have no affiliation with the W3, despite their name, and they have many, many problems with errors, security risks and out-dated code, in almost every aspect for which they provide documentation, see: W3Fools). It's generally better to rely on the W3C's documentation, or that at MDN. – Unplug

@DavidThomas: I checked at MDN. For <ol>``type attribute it says: This attribute was deprecated in HTML4, but reintroduced in HTML5. Unless the value of the list number matters (e.g. in legal or technical documents where items are to be referenced by their number/letter), the CSS list-style-type property should be used instead. But it gives no reason as to why. If the attribute is no longer deprecated, I can't see any reason why it should not be use. – Lipski

Answer 1

<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

Fadden

Answer 2

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.

Unplug