I am trying to make an ordered list where numbering style is alphanumerical characters in nested lists too.

Example:

a. one
b. two
   b.a. three
   b.b. four
   b.c. five
c. six
   c.a. seven
      c.a.a. eight
   c.b. nine
      c.b.a. ten
d. eleven

I have tried setting list-style-type to lower-alpha but it doesn't number nested lists correctly. I have achived what I want with numbers like this:

 ol {
    counter-reset: section;  
    list-style-type: none;
 }
 li {
    counter-increment: section;
 }
 li::before {  
    content: counters(section,".") ". ";
}

Now I want the same thing but with alphanumerical characters as numbering style. The solution can be done in HTML, CSS or JS.

I am trying to make an ordered list where numbering style is alphanumerical characters in nested lists too.

Example:

a. one
b. two
   b.a. three
   b.b. four
   b.c. five
c. six
   c.a. seven
      c.a.a. eight
   c.b. nine
      c.b.a. ten
d. eleven

I have tried setting list-style-type to lower-alpha but it doesn't number nested lists correctly. I have achived what I want with numbers like this:

 ol {
    counter-reset: section;  
    list-style-type: none;
 }
 li {
    counter-increment: section;
 }
 li::before {  
    content: counters(section,".") ". ";
}

Now I want the same thing but with alphanumerical characters as numbering style. The solution can be done in HTML, CSS or JS.

• javascript
• html
• css

• stackoverflow./questions/31859932/… – Paulie_D Commented Jun 3, 2019 at 16:06
• 1 Possible duplicate of A styled ordered list whose nested list should have numbers with letters using CSS counter property. Here's a demo based on that answer. – showdev Commented Jun 3, 2019 at 16:36

1 Answer 1

To achieve expected result, use type -'a' for orderlist

<ol type="a">
  <li>one</li>
  <li>two
  <ol type="a">
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol></li>
</ol>

Refer this link for different ordered types - https://developer.mozilla/en-US/docs/Web/HTML/Element/ol

type
Indicates the numbering type:
'a' indicates lowercase letters,
'A' indicates uppercase letters,
'i' indicates lowercase Roman numerals,
'I' indicates uppercase Roman numerals,
and '1' indicates numbers (default).

Code sample to achieve expected format

ol{
  list-style: none;
  counter-reset: item;
}

ol > li:before{
    counter-increment: item;
    content: counter(item, lower-alpha)".";
}

ol li ol{
    counter-reset: letter;
}
ol ol li:before{
    counter-increment: letter;
    content: counter(item, lower-alpha)"."counter(letter, lower-alpha) " ";
}

<ol type="a"> 
  <li>one</li>
  <li>two
  <ol>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol></li>
</ol>

codepen - https://codepen.io/nagasai/pen/rgPgBO

Explanation:

1. Reset list style for all ordered list and reset counter to initial default
2. Add content - counter(item, lower-alpha)"." with list type lower-alpha for list and sublist
3. Reset counter for sublist to start from initial default value (in this case - 'a')
4. Use content: counter(item, lower-alpha)"."counter(letter, lower-alpha) " " to use existing order value from list followed by sublist counter