HTML CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers

Question

I have a requirment to implement a nested ordered structured html page very similar like this. Most of the part is done but I got stuck at 1 place in ordering of number. Please suggest. Below is the required structure and my code.

1.Main Line 111111111 
    1.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb

2.Main Line 22222222
    2.1 Sub Line 111111111 
        a.aaaaaaaaaaa
        b.bbbbbbbbbbb   
    2.2 Sub Line 22222222 
        a.aaaaaaaaaaa 
            i.moreeeeee
            ii.moreeeeee
        b.bbbbbbbbbbb 
            i.moreeeeee
            ii.moreeeeee

But getting some overlapped numbers as shown in image: Please suggest where I am doing wrong?

Here in my code:

ol {
  counter-reset: item;
}

ol>li {
  counter-increment: item;
}

.sub-num-list>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

.sub-num-list>ol>li:before {
  content: counters(item, ".") " ";
  margin-left: -20px;
}

.sub-albhabatical-list>li {
  list-style-type: lower-alpha;
  margin-left: 20px;
}

.sub-roman-list>li {
  list-style-type: lower-roman;
  margin-left: 20px;
}

<div class="layout__wrapper">

  <ol>

    <li>Main Line 111111111
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>

      </ol>
    </li>

    <li>Main Line 22222222
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
        <li>Sub Line 22222222
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
            <li>bbbbbbbbbbb
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
          </ol>
        </li>
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

You are using an `ol`, therefore, it's adding a number by default. You could remove it with that `.sub-num-list { list-style: none; }` — Amaury Hanser, Mar 12 '20 at 09:36

Oddrigue · Accepted Answer · 2020-03-12T10:48:37.530

You were wrong in the use of your :before and the list counter CSS property. Also you probably got lost in CSS selectors and ended up with undesired effects.

I fixed it for you, hopefully this is what you were looking for

li {
  display: block
}

.main-num-list, .sub-num-list {
  counter-reset: item
}

.main-num-list>li:before,
.sub-num-list>li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}

.sub-albhabatical-list {
  counter-reset: letter;
}

.sub-albhabatical-list > li:before {
  content: counter(letter, lower-alpha) ". ";
  counter-increment: letter;
}

.sub-roman-list {
  counter-reset: roman;
}

.sub-roman-list > li:before {
  content: counter(letter, lower-roman) ". ";
  counter-increment: roman;
}

<div class="layout__wrapper">

  <ol class="main-num-list">

    <li>Main Line 111111111
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>

      </ol>
    </li>

    <li>Main Line 22222222
      <ol class="sub-num-list">
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
        <li>Sub Line 22222222
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
            <li>bbbbbbbbbbb
              <ol class="sub-roman-list">
                <li>moreeeeee</li>
                <li>moreeeeee</li>
              </ol>
            </li>
          </ol>
        </li>
        <li>Sub Line 111111111
          <ol class="sub-albhabatical-list">
            <li>aaaaaaaaaaa</li>
            <li>bbbbbbbbbbb</li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</div>

You can find some more informations in similar questions about list counter formatting and nested different list-style-type counters

score 1 · Answer 2 · answered Mar 12 '20 at 09:46

1

Just add this style in your style section.

.sub-num-list{
  list-style-type: none;
}

It'll remove overlapping of numbers

answered Mar 12 '20 at 09:46

Khalid Khan

3,017
1
11
27

HTML CSS Issues in implementing nested ordering which includes numbers, alphabets and roman numbers

2 Answers2