CSS Lists in a specific format

Question

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>

To me it looks like the format you were asking for, what specifically is wrong? — smallpepperz
– smallpepperz, Commented Nov 24 at 15:35
What should it be? To me based on your code it should be at the same level as akslöfdf, which it is, and therefore be numbered as 2) — smallpepperz
– smallpepperz, Commented Nov 24 at 15:43
You HTML is invalid. You can't have a ul as a direct child of another ul. Put your code through a validator (e.g.validator.w3.org) and see if corrected code still has the problem. If it does, edit your questio showing us the correct code - preferably as a runnable snippet. Thanks. — A Haworth
– A Haworth, Commented Nov 25 at 7:51

A Haworth · Accepted Answer · 2025-11-26 08:21:55Z

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>

Collectives™ on Stack Overflow

CSS Lists in a specific format

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related