I am wondering if you could automatically create a list in the following format:

A. I. 1. a) aa) (1) (a) (aa) etc. etc.

Could anyone help me accomplish this?
I am asking for my Anki-template
I already found a somewhat solution to my problem but it does not produce the right outcome on one of the layers aa) than ab) ac) and so on

ul{ list-style-type: upper-latin; } ul ul{ list-style-type: upper-roman; } ul ul ul{ list-style-type: decimal; } ul ul ul ul{ counter-reset: level4; list-style-type: none; } ul ul ul ul>li:before{ counter-increment: level4; content: counter(level4, lower-alpha) ")"; padding-right: 0.5rem; } ul ul ul ul ul{ counter-reset: level5; counter-increment: level5 26; list-style-type: none; } ul ul ul ul ul>li:before{ counter-increment: level5; content: counter(level5, lower-alpha) ")"; padding-right: 0.5rem; } ul ul ul ul ul ul{ counter-increment: level5 0; counter-reset: level6; list-style-type: none; } ul ul ul ul ul ul>li:before{ counter-increment: level6; content: "(" counter(level6, decimal) ")"; padding-right: 0.5rem; } <ul> <li>lasfkjlsd</li> <ul> <li>asldfsdlf</li> <ul> <li>akslöfdf</li> <ul> <li>askdlf</li> <ul> <li>asjkldöf</li> <ul> <li>slkfd</li> <li>salödf</li> </ul> <li>aslkdöf</li> </ul> <li>asdklf</li> </ul> <li>akslödf</li> </ul> <li>jaklösdf</li> </ul> <li>asklföd b</li> </ul>

Mister Jojo's user avatar

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

Laura Sophie's user avatar

New contributor

Laura Sophie is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

4

The problem was in the structure of the HTML. The CSS was OK.

In HTML, a ul element may not have another ul element as its direct child.

This snippet therefore ensures that the ul elements lie within their associated li elements.

Note: the content has been changed to make it more obvious what level we are at.

<style> ul { list-style-type: upper-latin; } ul ul { list-style-type: upper-roman; } ul ul ul { list-style-type: decimal; } ul ul ul ul { counter-reset: level4; list-style-type: none; } ul ul ul ul>li::before { counter-increment: level4; content: counter(level4, lower-alpha) ")"; padding-right: 0.5rem; } ul ul ul ul ul { counter-reset: level5; counter-increment: level5 26; list-style-type: none; } ul ul ul ul ul>li::before { counter-increment: level5; content: counter(level5, lower-alpha) ")"; padding-right: 0.5rem; } ul ul ul ul ul ul { counter-increment: level5 0; counter-reset: level6; list-style-type: none; } ul ul ul ul ul ul>li::before { counter-increment: level6; content: "(" counter(level6, decimal) ")"; padding-right: 0.5rem; } } </style> <ul> <li>Level 1 Number 1 <ul> <li>Level 2 Number 1 <ul> <li>Level 3 Number 1 <ul> <li>Level 4 Number 1 <ul> <li>Level 5 Number 1 <ul> <li>Level 6 Number 1</li> <li>Level 6 Number 2</li> </ul> </li> <li>Level 5 Number 2 </li> </ul> </li> <li>Level 4 Number 2 </li> </ul> </li> <li>Level 3 Number 2 </li> </ul> </li> <li>Level 2 Number 2 </li> </ul> </li> <li>Level 1 Number 2 </li> </ul>

A Haworth's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.