CODEWITHSUNDEEP
csshtml
mySun
mySun

Reputation: 1696

How to create order list in order list?

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.

Upvotes: 2

Views: 695

Answers (5)

Yash Yadav
Yash Yadav

Reputation: 655

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.

Upvotes: 2

Super User
Super User

Reputation: 9642

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>

Upvotes: 1

King Reload
King Reload

Reputation: 2952

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>

Upvotes: 1

Danield
Danield

Reputation: 125443

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>

Upvotes: 4

Ali Rasheed
Ali Rasheed

Reputation: 2817

<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>

Upvotes: 1

Related Questions