CODEWITHSUNDEEP
javascripthtmlcss
Freddy19
Freddy19

Reputation: 187

CSS nested ordered list numbered with alphanumerical characters

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.

Upvotes: 5

Views: 2993

Answers (1)

Naga Sai A
Naga Sai A

Reputation: 10975

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

Upvotes: 9

Related Questions