How to create order list in order list?

Question

I need create Order list in Order list in HTML.

For example:

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

This code not work in view. How to create this view:

1. Coffee
2. Tea
    2-1. Black tea
    2-2. Green tea
3. Milk

Thank you.

Possible duplicate of [Html ordered list 1.1, 1.2 (Nested counters and scope) not working](http://stackoverflow.com/questions/10405945/html-ordered-list-1-1-1-2-nested-counters-and-scope-not-working) — Pete, Apr 25 '17 at 10:31
[CSS counters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) — Lars Beck, Apr 25 '17 at 10:31

score 4 · Accepted Answer · answered Apr 25 '17 at 10:36

Since you need a custom format for your nested list items, you'll need to use CSS counters.

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

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Yash Yadav · Answer 2 · 2017-04-25T10:55:19.323

2

HTML does not have this styling by default. So we need to use some CSS here.

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") " "; 
  counter-increment: item; 
}

<ol>
  <li>Coffee</li>
  <li>Tea
   <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

Explanation:
"Counters" to count the li no.
"Counter-increment" to increment the counter every time a new li is detected.
and of course
"Counter-reset" to reset this counter every time a new sub-list (i.e ol is detected)

Hope this helps.

edited Apr 25 '17 at 10:55

answered Apr 25 '17 at 10:49

Yash Yadav

659
4
14

@KingReload I didn't ask the question buddy – Yash Yadav May 04 '17 at 11:51

score 1 · Answer 3 · answered Apr 25 '17 at 10:36

1

<ol>
  <li>Hey</li>
  <li>
    <ol>
      <li>This is</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>
        <ol>
          <li>Nested list</li>
        </ol>
      </li>
    </ol>
  </li>
    
</ol>

answered Apr 25 '17 at 10:36

Ali Rasheed

2,765
2
18
31

score 1 · Answer 4 · answered Apr 25 '17 at 10:36

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") ". "; counter-increment: item }

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

score 1 · Answer 5 · answered Apr 25 '17 at 10:37

You can use pseudo element for this

ol { 
    counter-reset: item 
}
li { 
    display: block 
}
li:before { 
    content: counters(item, ".") " "; 
    counter-increment: item; 
}

 <ol>
  <li>one</li>
  <li>two
  <ol>
   <li>two.one</li>
   <li>two.two</li>
   <li>two.three</li>
  </ol>
     </li>
  <li>three 
  <ol>
   <li>three.one</li>
   <li>three.two</li>
    <ol>
     <li>three.two.one</li>
     <li>three.two.two</li>
    </ol>
   </ol>
     </li> 
  <li>four</li>
  </ol>

How to create order list in order list?

5 Answers5

Hope this helps.