How can I do html multi elements list with type attribute?

Question

I want to do a list looks like:

A. one
   A.1. one-one
        A.1.a. one-one-one
        A.1.b. one-one-two
   B.1. one-two
        B.1.a. one-two-one
        B.1.b. one-two-two
B. two

We can do this with just numbers (like: Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?) but i want to use type attribute.

<ol type="A">
    <li>one
        <ol>
            <li>one-one
                <ol type="a">
                    <li>one-one-one</li>
                    <li>one-one-two</li>
                </ol>
            </li>
            <li>one-two</li>
                <ol type="a">
                    <li>one-two-one</li>
                    <li>one-two-two</li>
                </ol>
        </ol>
    </li>
    <li>two</li>
</ol>

View/work on JSFiddle: https://jsfiddle.net/cLeayu6f/1/

How can I do that? Thanks.

Answer 1

As said in the comments, you can't do this with the type attribute, and those values are not allowed either (it's upper-latin and lower-latin). You can, however, use a data-* attribute and CSS attribute selectors. If we take the code from this answer, it looks like this:

ol { counter-reset: item }
li { display: block }
li:before { counter-increment: item }

ol		  > li:before { content: counters(item, ".", decimal    ) " "; }
ol[data-type="A"] > li:before { content: counters(item, ".", upper-latin) " "; }
ol[data-type="a"] > li:before { content: counters(item, ".", lower-latin) " "; }

<ol data-type="A">
    <li>one
        <ol>
            <li>one-one
                <ol data-type="a">
                    <li>one-one-one</li>
                    <li>one-one-two</li>
                </ol>
            </li>
            <li>one-two</li>
                <ol data-type="a">
                    <li>one-two-one</li>
                    <li>one-two-two</li>
                </ol>
        </ol>
    </li>
    <li>two</li>
</ol>

This doesn't work exactly how you planned, because all the elements in the second-level list are decimal, and all the elements in the third level are lower-latin. This can only be fixed if we now how many levels there are in the list, and takes some more code. If we take three levels:

li { display: block }
li:before { counter-increment: levelone }

/* First level */
body > ol { counter-reset: levelone }
body > ol > li:before { counter-increment: levelone }
body > ol		 > li:before { content: counter(levelone, decimal    ) " "; }
body > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) " "; }
body > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) " "; }

/* Second level */
body > ol > li > ol { counter-reset: leveltwo }
body > ol > li > ol > li:before { counter-increment: leveltwo }
body > ol		 > li > ol		  > li:before { content: counter(levelone, decimal    ) "." counter(leveltwo, decimal    ) " "; }
body > ol		 > li > ol[data-type="A"] > li:before { content: counter(levelone, decimal    ) "." counter(leveltwo, upper-latin) " "; }
body > ol		 > li > ol[data-type="a"] > li:before { content: counter(levelone, decimal    ) "." counter(leveltwo, lower-latin) " "; }
body > ol[data-type="A"] > li > ol		  > li:before { content: counter(levelone, upper-latin) "." counter(leveltwo, decimal    ) " "; }
body > ol[data-type="A"] > li > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) "." counter(leveltwo, upper-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="a"] > li:before { content: counter(levelone, upper-latin) "." counter(leveltwo, lower-latin) " "; }
body > ol[data-type="a"] > li > ol		  > li:before { content: counter(levelone, lower-latin) "." counter(leveltwo, decimal    ) " "; }
body > ol[data-type="a"] > li > ol[data-type="A"] > li:before { content: counter(levelone, lower-latin) "." counter(leveltwo, upper-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) "." counter(leveltwo, lower-latin) " "; }

/* Third level */
body > ol > li > ol > li > ol { counter-reset: levelthree }
body > ol > li > ol > li > ol > li:before { counter-increment: levelthree }
body > ol		 > li > ol		  > li > ol		   > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, decimal    ) "." counter(levelthree, decimal    ) " "; }
body > ol		 > li > ol		  > li > ol[data-type="A"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, decimal    ) "." counter(levelthree, upper-latin) " "; }
body > ol		 > li > ol		  > li > ol[data-type="a"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, decimal    ) "." counter(levelthree, lower-latin) " "; }
body > ol		 > li > ol[data-type="A"] > li > ol		   > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, upper-latin) "." counter(levelthree, decimal    ) " "; }
body > ol		 > li > ol[data-type="A"] > li > ol[data-type="A"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, upper-latin) "." counter(levelthree, upper-latin) " "; }
body > ol		 > li > ol[data-type="A"] > li > ol[data-type="a"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, upper-latin) "." counter(levelthree, lower-latin) " "; }
body > ol		 > li > ol[data-type="a"] > li > ol		   > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, lower-latin) "." counter(levelthree, decimal    ) " "; }
body > ol		 > li > ol[data-type="a"] > li > ol[data-type="A"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, lower-latin) "." counter(levelthree, upper-latin) " "; }
body > ol		 > li > ol[data-type="a"] > li > ol[data-type="a"] > li:before { content: counter(levelone, decimal    ) "."  counter(leveltwo, lower-latin) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="A"] > li > ol		  > li > ol		   > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="A"] > li > ol		  > li > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="A"] > li > ol		  > li > ol[data-type="a"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="A"] > li > ol		   > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="A"] > li > ol[data-type="A"] > li > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="A"] > li > ol[data-type="a"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="a"] > li > ol		   > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="A"] > li > ol[data-type="a"] > li > ol[data-type="A"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="A"] > li > ol[data-type="a"] > li > ol[data-type="a"] > li:before { content: counter(levelone, upper-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="a"] > li > ol		  > li > ol		   > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="a"] > li > ol		  > li > ol[data-type="A"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="a"] > li > ol		  > li > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, decimal    ) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="A"] > li > ol		   > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="a"] > li > ol[data-type="A"] > li > ol[data-type="A"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="A"] > li > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, upper-latin) "." counter(levelthree, lower-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="a"] > li > ol		   > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, decimal    ) " "; }
body > ol[data-type="a"] > li > ol[data-type="a"] > li > ol[data-type="A"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, upper-latin) " "; }
body > ol[data-type="a"] > li > ol[data-type="a"] > li > ol[data-type="a"] > li:before { content: counter(levelone, lower-latin) "."  counter(leveltwo, lower-latin) "." counter(levelthree, lower-latin) " "; }

<ol data-type="A">
    <li>one
        <ol>
            <li>one-one
                <ol data-type="a">
                    <li>one-one-one</li>
                    <li>one-one-two</li>
                </ol>
            </li>
            <li>one-two
                <ol data-type="a">
                    <li>one-two-one</li>
                    <li>one-two-two</li>
                </ol>
	    </li>
        </ol>
    </li>
    <li>two</li>
</ol>

As you can see, with p possibilities and n levels, the rules for one level is pⁿ, so with more levels or possibilities, this would be impossible without a simpler way. But it works now. I hope I'm missing some way to do this.

One more thing: if you can predefine which list-style-type, I would recommend to do that, since it results in one rule of code for each level.