3

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.

Freddy19
  • 167
  • 4
  • 10
  • https://stackoverflow.com/questions/31859932/style-an-ordered-list-like-1-1-1-2-instead-of-1-2 – Paulie_D Jun 03 '19 at 16:06
  • 1
    Possible duplicate of [A styled ordered list whose nested list should have numbers with letters using CSS counter property](https://stackoverflow.com/questions/36682602/a-styled-ordered-list-whose-nested-list-should-have-numbers-with-letters-using-c). [Here's a demo](https://jsfiddle.net/e4og9rfs/) based on [that answer](https://stackoverflow.com/a/36683273/924299). – showdev Jun 03 '19 at 16:36

1 Answers1

6

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.org/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
Naga Sai A
  • 10,771
  • 1
  • 21
  • 40