Clever Geek Handbook

HTML list index to keep the original numbering

I need to defer an ordered list to keep the numbering of the elements of the parent list:

What do I have:

 // My code:
 <ol>
      <li>Item 1</li>
      <li>
           Item 2
           <ol>
                <li>Item 2.1</li>
                <li>Item 2.2</li>
           </ol>
      </li>
      <li>Item 3</li>
 </ol>

Etc.

Now I get the result:

      // Result:
      1. Item 1
      2. Item 2
           Item 1
           Item 2
      3. Item 3

I'm looking for:

      // Looking for:
      1. Item 1
      2. Item 2
           2.1 Item 2.1
           2.2. Item 2.2
      3. Item 3

Any ideas?

+3


source to share


2 answers


You can use counters for this:



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


source


Inspired by DON's answer, I played around with the counters property and was able to get this:

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

 ol li:before {
     font-weight: bold;
     content: counters(item,".")".   "; 
     counter-increment: item;
 }

 ol ol {
     counter-reset: subitem;
     list-style-type: none;
 }

 li li:before {
     content: counters(item,".")"."counters(subitem,".")".   "; 
     counter-increment: subitem;
 }


I'm not sure if this is the cleanest solution because I don't know the content element very well, but it will definitely give you an ordered list that increases the number of sub-level list items according to their parent container ..

0


source






More articles:


All Articles