ordered list 1, 1.1, a

Issue

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>

Solution

You can use list-style-type: lower-alpha; and cancel out your counters with the :not() pseudo class:

1. At the end of your stylesheet create a rule that targets your type="a" and assigns the list style type you want (lower-alpha).
2. Your counters will override this declaration so an easy solution is to only apply them to <ol> elements that are :not([type="a"]) (Not one of your alpha lists).

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;
}

<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>

Answered By - Zach Jensz