ordered list 1, 1.1, a-CodePudding

I need the list in html with this pattern:

1. Item
  1.1 Subitem
  1.2 Subitem2
     a. something more
     b. another point

I have the solution for 1, 1.1, 1.2.1 etc.:

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, ".");
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

And it works great. But I do not know how to modify it to get the third level as letters instead of 3 numbers. I added the type="a" to the correct <ol> element in the html but it got overwritten.

Could you help please?

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, ".");
  display: table-cell;
  padding-right: 0.6em;
}

li ol > li {
  margin: 0;
}

    <ol>
    <li>
        <b>
            Our rights if you breach this policy
        </b>
        <ol>
            <li>
                We will decide whether there has been a breach of this policy by you.
            </li>
            <li>
                If we decide that you are in breach of any part of this policy, we may:
                <ol type="a">
                    <li>
                        issue a warning to you;
                    </li>
                    <li>
                        immediately stop your right to use our Service;
                    </li>
                    <li>
                        take legal action against you to recover any of our losses caused by your breach; or
                    </li>
                    <li>
                        notify law enforcement authorities if we decide that you have broken any law; or
                    </li>
                    <li>
                        take any other action that we think is appropriate.
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    </ol>

CodePudding user response：

A few specificity issues with straight up assigning list-style-type: lower-alpha; but hopefully this works for you:

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

ol:not([type="a"]) > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol:not([type="a"]) > li:before {
  content: counters(item, ".");
  display: table-cell;
  padding-right: 0.6em;
}

ol[type="a"] {
  list-style-type: lower-alpha;
  margin: 0;
}

<ol>
    <li>
        <b>
            Our rights if you breach this policy
        </b>
        <ol>
            <li>
                We will decide whether there has been a breach of this policy by you.
            </li>
            <li>
                If we decide that you are in breach of any part of this policy, we may:
                <ol type="a">
                    <li>
                        issue a warning to you;
                    </li>
                    <li>
                        immediately stop your right to use our Service;
                    </li>
                    <li>
                        take legal action against you to recover any of our losses caused by your breach; or
                    </li>
                    <li>
                        notify law enforcement authorities if we decide that you have broken any law; or
                    </li>
                    <li>
                        take any other action that we think is appropriate.
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    </ol>