skip to Main Content

I am styling an HTML nested ordered list (numbered).
I am trying to achieve same layout as MS Word has usually when you press Tab before the numbered list item. Ex:

1. Item at top
1.1.1.1. Item at middle
2. Item at bottom

For now I have the following CSS which sets 1.0.0.1 for the Item at middle.
Is there any way to fix that with CSS and without changing the HTML?

ol { counter-reset: itemCounter; padding-left: 0 }
ol li { list-style: none; }
ol li:not(:has(ol)):before {
    content: counters(itemCounter, ".") ". ";
    counter-increment: itemCounter;
}
<ol>
   <li>Item at top</li>
   <li>
      <ol>
         <li>
            <ol>
               <li>
                  <ol>
                     <li>Item at middle</li>
                  </ol>
               </li>
            </ol>
         </li>
      </ol>
   </li>
   <li>Item at bottom</li>
</ol>

2

Answers


  1. With this modification, the nested ol element will start with "1" instead of "0", and the numbering will continue from there.

    ol {
      counter-reset: itemCounter;
      padding-left: 0;
    }
    
    ol li {
      list-style: none;
    }
    
    ol li:not(:has(ol)):before {
      content: counters(itemCounter, ".") ". ";
      counter-increment: itemCounter;
    }
    
    ol ol {
      counter-reset: itemCounter 1; /* initialize counter to 1 */
      padding-left: 1.5em;
    }
    <ol>
       <li>Item at top</li>
       <li>
          <ol>
             <li>
                <ol>
                   <li>
                      <ol>
                         <li>Item at middle</li>
                      </ol>
                   </li>
                </ol>
             </li>
          </ol>
       </li>
       <li>Item at bottom</li>
    </ol>
    Login or Signup to reply.
  2. This seems to work as you need it to:

    ol { counter-reset: itemCounter; padding-left: 0 }
    ol li { list-style: none; }
    ol li:not(:has(ol)):before {
        content: counters(itemCounter, ".") ". ";
        counter-increment: itemCounter;
    }
    
    ol>li:has(ol) {
      counter-increment: itemCounter 0;
    }
    
    ol>li ol li:has(ol) {
      counter-increment: itemCounter 1;
    }
    <ol>
       <li>Item at top</li>
       <li>
          <ol>
             <li>
                <ol>
                   <li>
                      <ol>
                         <li>Item at middle</li>
                         <li>Item at middle</li>
                      </ol>
                   </li>
                </ol>
             </li>
             <!-- a few li for testing 👇 -->
             <li>
                <ol>
                   <li>
                      <ol>
                         <li>Item at middle</li>
                      </ol>
                   </li>
                   <li>
                      <ol>
                         <li>Item at middle</li>
                         <li>Item at middle</li>
                      </ol>
                   </li>
                </ol>
             </li>
          </ol>
       </li>
       <li>Item at bottom</li>
    </ol>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search