Question 42845 in Html Question posted in
Some basic documentation can be found here.

Prevent zero in nested ordered list when using css counters – Html

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

2

Answers


  1. 0

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

    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