'Ordered list 1, 1.1, a

Current result:

1. Item
  1.1 Subitem
  1.2 Subitem2
     1.2.1 something more
     1.2.2 another point

Desired result:

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

How do I modify my code 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.

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


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions