Formatting ordered list in certain way

Question

I have a HTML that produces an ordered list for me.

<ol>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4, holds some nested elements
        <ol>
            <li>Nested Element 1</li>
            <li>Nested Element 2</li>
        </ol>
    </li>
</ol>

The code above outputs it this way:

1. Element 1
2. Element 2
3. Element 3
4. Element 4, holds some nested elements
    1. Nested Element 1
    2. Nested Element 2

I'm trying to make it look it this way:

1. Element 1
2. Element 2
3. Element 3
4. Element 4, holds some nested elements
    4.1. Nested Element 1
    4.2. Nested Element 2

I've actually managed to solve it using the solution here: Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?

and as I'm pretty new to HTML, I'm wondering if there's a way to solve it without using the CSS styles?

Thanks

score 0 · Answer 1 · answered Mar 10 '20 at 23:30

0

This is mostly done using CSS. The only parameters that can relate to this are type which is a basic version of CSS list-style-type, but the CSS one gives you a lot more options to customize this. You can also use start which specifies the starting number for the ordered list and reversed to reverse the list.

answered Mar 10 '20 at 23:30

Mihail Minkov

2,463
2
24
41

Is there any way the start can be set to float number so the starting number is for example 4.1? @Mihail – chileano Mar 10 '20 at 23:52
Hello @chileano you'd have to modify the first level of the list, but it's strange that you should start on 4.1, 4.1 should be a child element of 4. – Mihail Minkov Mar 11 '20 at 00:23

score 0 · Answer 2 · answered Mar 10 '20 at 23:36

This is how you do it:

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") ". "; 
}

<ol>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4, holds some nested elements
        <ol>
            <li>Nested Element 1</li>
            <li>Nested Element 2</li>
        </ol>
    </li>
</ol>

See this reference: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

Formatting ordered list in certain way

2 Answers2