Nested list with different style-CodePudding

HTML and Lists are on a new level for me with this question. I am trying to create a nested list in HTML with related numbering and in the third level a alpa numbering type.

body {
  padding-left: 100px;
}

ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

ol>li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

ol>li:before {
    content: counters(item, ".",decimal-leading-zero) ". ";
    display: table-cell;
    padding-right: 0.6em;
}

li ol>li {
    margin: 0;
}

li ol>li:before {
    content: counters(item, ".",decimal-leading-zero) " ";
}

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Above is what I have. And that results in :

But I am looking for:

Does anyone have a idea how to solve this?

I already tried numerise solution and searched the web. That is how I came to the above solution. But I could not find the third level lower-alpha type style solution.

CodePudding user response：

Please check below working code:

ol {
        list-style-type: none;
        counter-reset: item;
        margin: 0;
        padding: 0;
    }

    ol>li {
        display: block;
        counter-increment: item;
        margin-bottom: 0.6em;
        padding-left: 15px;
    }

    ol>li:before {
        content: counters(item, ".",decimal-leading-zero) ". ";
        display: table-cell;
        padding-right: 0.6em;
    }

    li ol>li {
        margin: 0;
    }

    li ol>li:before {
        content: counters(item, ".",decimal-leading-zero) " ";
    }
    
    ol>li>ol>li>ol
    {
    counter-reset: listStyle;
    }
    
        ol>li>ol>li>ol li{
  margin-left: 1em;
  counter-increment: listStyle;
}
        
        ol>li>ol>li>ol li::before {
  margin-right: 1em;
  content: counter(listStyle, lower-alpha);
}

<html>

<head>

</head>

<body>

</body>
<ol>
    <li>
      <ol>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </li>
    <li></li>
    <li></li>
    <li>
      <ol>
        <li></li>
        <li>
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </li>
      </ol>
    </li>
  </ol>
</body>

</html>

What is performed in the above code?

Here, I have target the third level of ol where I have rest the counter and then re-initial in the li of third level ol and the used before css to get lower-alpha

Please let me know if you find any issue with the code

CodePudding user response：

The easiest way would be to change your third level list items back into list items, hide the content and use the list style of lower-alpha:

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol>li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol>li:before {
  content: counters(item, ".", decimal-leading-zero) ". ";
  display: table-cell;
  padding-right: 0.6em;
}

li ol>li {
  margin: 0;
}

li ol>li:before {
  content: counters(item, ".", decimal-leading-zero) " ";
}

/* below styles added, nothing else changed */

ol ol ol {
  list-style-type: lower-alpha;
}

ol ol ol li {
  display:list-item;
  margin-left: 1em;
}
ol ol ol li:before {
  content: none;
}

<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li></li>
  <li></li>
  <li>
    <ol>
      <li></li>
      <li>
        <ol>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </li>
    </ol>
  </li>
</ol>