Nested ordered lists with varied initial counter positions

Question

Nested ordered lists with varied initial counter positions

In order to create an html ordered list, I am using a Nested counter.

This is the code snippet that I am using:

The expected output should be as follows:

0. zero
  0.1 zero.one
1. one
  1.1. one.one
  1.2. one.two
  1.3. one.three
2. two
  2.1 two.one
  2.2 two.two
    2.2.1 two.two.one
    2.2.2 two.two.two
3. three

However, the actual output that I am getting is different:

0. zero
  0.0 zero.one
1. one
  1.0 one.one
  1.1 one.two
  1.2 one.three
2. two
  2.0 two.one
  2.1 two.two
    2.1.0 two.two.one
    2.2.1 two.two.two
3. three

I would like the main list index to start at 0, while the sublists index starts at 1. I have considered using two counters but my knowledge of advanced CSS is still limited and I am unsure how to implement them correctly.

Thank you for any assistance!

html css

Answer 1

Answer №1

Your code presents two significant issues that need attention. The first problem pertains to invalid HTML code structure as the ol elements should only contain direct children of li. However, your code includes ol elements as direct children of another ol. To rectify this, you should enclose the nested ol elements within li tags. The second issue relates to achieving desired functionality by adjusting the counter-reset property for distinct ol instances:

HTML:

 <!-- Your revised HTML code goes here -->

CSS:

#list { 
  counter-reset: item -1;
}
ol {
  counter-reset: item; 
  padding-left: 10px;  
}
LI { display: block }
LI:before { 
  content: counters(item, ".") " "; 
  counter-increment: item;
}

Demo 1

To address the issue without using an id attribute for the outermost ol, consider implementing the following modifications:

 <!-- Revised CSS for alternative implementation -->

Demo 2

Another strategic approach to resolve the problems in your code involves:

 <!-- Modified CSS for a different solution -->

Demo 3

Answer 2

Your code presents two significant issues that need attention. The first problem pertains to invalid HTML code structure as the ol elements should only contain direct children of li. However, your code includes ol elements as direct children of another ol. To rectify this, you should enclose the nested ol elements within li tags. The second issue relates to achieving desired functionality by adjusting the counter-reset property for distinct ol instances:

HTML:

 <!-- Your revised HTML code goes here -->

CSS:

#list { 
  counter-reset: item -1;
}
ol {
  counter-reset: item; 
  padding-left: 10px;  
}
LI { display: block }
LI:before { 
  content: counters(item, ".") " "; 
  counter-increment: item;
}

Demo 1

To address the issue without using an id attribute for the outermost ol, consider implementing the following modifications:

 <!-- Revised CSS for alternative implementation -->

Demo 2

Another strategic approach to resolve the problems in your code involves:

 <!-- Modified CSS for a different solution -->

Demo 3

Answer 3

Answer №2

For accurate numbers in the JS Fiddle example, adjust the counter-reset to start at item 0;

CSS

OL {
    counter-reset: item 0;
    padding-left: 10p;
}

LI { 
    display: block
}

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

Also, make sure your OL elements are contained within the LI elements, as you cannot have an OL inside another OL.

HTML:

<body>
    <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
                    <ol>
                        <li>three.two.one</li>
                        <li>three.two.two</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>four</li>
    </ol>
</body>

Answer 4

For accurate numbers in the JS Fiddle example, adjust the counter-reset to start at item 0;

CSS

OL {
    counter-reset: item 0;
    padding-left: 10p;
}

LI { 
    display: block
}

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

Also, make sure your OL elements are contained within the LI elements, as you cannot have an OL inside another OL.

HTML:

<body>
    <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
                    <ol>
                        <li>three.two.one</li>
                        <li>three.two.two</li>
                    </ol>
                </li>
            </ol>
        </li>
        <li>four</li>
    </ol>
</body>

Answer 5

Answer №3

Hey there, it looks like your HTML code (in the fiddle) is not quite right. As indicated in the title, your <ol> elements should be properly nested within each other, meaning one should be inside another as shown below:

<ol>
  <li>Two
    <ol>
      <li>Two.one</li>
    </ol>
  </li>
</ol>

Currently, your <ol> elements are directly connected to each other. According to HTML standards, an ordered list (<ol>) must only have list items (<li>) as children or possibly script tags. Your current structure looks something like this:

<ol>
   <li>Two</li>
   <ol>
      <li>Two.one</li>
   </ol>
</ol>

Once you update it to the first example mentioned above, you can then apply different CSS styles for nested list items, such as the following:

ol { counter-reset: item -1 }
ol li ol  { counter-reset: item 0 }

You can see a demonstration of this setup here: http://jsfiddle.net/kevinvanlierde/YpgfF/1/

Answer 6

Hey there, it looks like your HTML code (in the fiddle) is not quite right. As indicated in the title, your <ol> elements should be properly nested within each other, meaning one should be inside another as shown below:

<ol>
  <li>Two
    <ol>
      <li>Two.one</li>
    </ol>
  </li>
</ol>

Currently, your <ol> elements are directly connected to each other. According to HTML standards, an ordered list (<ol>) must only have list items (<li>) as children or possibly script tags. Your current structure looks something like this:

<ol>
   <li>Two</li>
   <ol>
      <li>Two.one</li>
   </ol>
</ol>

Once you update it to the first example mentioned above, you can then apply different CSS styles for nested list items, such as the following:

ol { counter-reset: item -1 }
ol li ol  { counter-reset: item 0 }

You can see a demonstration of this setup here: http://jsfiddle.net/kevinvanlierde/YpgfF/1/

Answer 7

Answer №4

After modifying the Tyblitz HTML structure, the results were displayed correctly.

<body>
 <ol>
  <li>zero</li>
  <li>one
      <ol>
       <li>one.one</li>
       <li>one.two</li>
       <li>one.three</li>
      </ol>
  </li>
  <li>two
      <ol>
       <li>two.one</li>
       <li>two.two
            <ol>
             <li>two.two.one</li>
             <li>two.two.two</li>
            </ol>
        </li>
       </ol>
     </li>
  <li>three</li>
  </ol>
 </body>

CSS

OL { counter-reset: item -1; padding-left: 10px;  }
ol li ol { counter-reset: item 0; }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

JSFiddel

Answer 8

After modifying the Tyblitz HTML structure, the results were displayed correctly.

<body>
 <ol>
  <li>zero</li>
  <li>one
      <ol>
       <li>one.one</li>
       <li>one.two</li>
       <li>one.three</li>
      </ol>
  </li>
  <li>two
      <ol>
       <li>two.one</li>
       <li>two.two
            <ol>
             <li>two.two.one</li>
             <li>two.two.two</li>
            </ol>
        </li>
       </ol>
     </li>
  <li>three</li>
  </ol>
 </body>

CSS

OL { counter-reset: item -1; padding-left: 10px;  }
ol li ol { counter-reset: item 0; }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Nested ordered lists with varied initial counter positions

Answer №1

Demo 1

Demo 2

Demo 3

Answer №2

Answer №3

Answer №4

JSFiddel

Similar questions

How can recursive data be displayed in a template?

Please refrain from altering the color of my flag on hover

Adjustment of Facebook button positioning in floating bar on Firefox

Excessive text overflowing in a chat interface can be resolved through CSS styling

`Animate your divs with slide in and slide out effects using

Dynamic visual content (map)

Tab order in Angular Forms can be adjusted

Setting the `setCustomValidity()` method for dynamically inserted HTML elements Explanation on how to use

Issues with Toggling Visibility in HTML, CSS, and Javascript

Scrolling horizontally with Bootstrap 4

What is the best way to split an array into four columns and allocate 10 <li> items from the array to each column?

Interaction between index file and module instance

Search for the specified pattern in BBEdit and delete the entire table that matches

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

Is it possible to create editable Word documents programmatically in ASP.NET?

How can I expand and collapse all the Bootstrap panels simultaneously?

Alignment of input fields and labels in Bootstrap by utilizing the Grid System

Having trouble with a fixed element that won't scroll?

Having trouble with the menu toggle button on Bootstrap 4?

Using jQuery to animate two images simultaneously in opposite directions