CSS Counters with different counter display in every level without extra classes

Question

I am trying to do an ordered list (Terms and condition content) with a numeric value at the root, lower alpha for the second, and roman on the third. I found a SO guide here, but it requires adding a class on the second layer. Unfortunately the content will be added via a WYSIWYG editor by staff so adding extra classes manually is not possible(?).

The code below output a standard counter. The outcome will be 2.1 being replaced with a and 2.1.1 will be replaced with i.

Sample list. *Can't embed the whole image :(

Any advice is appreciated.

.numbered_list{
counter-reset: list-number;
ol {
    padding-left: 40px;
    list-style-type:none;
    counter-reset:count;
    li{
        color: red;
        counter-increment:count;

        &::marker{
            content: counters(count, '.', decimal) ') ';
        }

        &:before{
        }
    }
}

}

whitespace whitespace · Accepted Answer · 2022-07-29T00:07:56

Following the anser on the question you linked, you simply need to change the CSS selectors.

For each additional level you want to target, add another ol to the selector list. In a production environment, you would probably prepend all of the selectors with your wysiwyg editor class.

/* first level */

ol {
  counter-reset: l1;
  list-style-type: none;
}

ol li:before {
  counter-increment: l1;
  content: counter(l1) " ";
}


/* second level */

ol ol {
  counter-reset: l2;
}

ol ol li:before {
  counter-increment: l2;
  content: counter(l1) "." counter(l2) " ";
}


/* third level */

ol ol ol {
  counter-reset: l3;
}

ol ol ol li:before {
  counter-increment: l3;
  content: counter(l1) "." counter(l2) "." counter(l3) " ";
}

<ol>
  <li>
    First Level

    <ol>
      <li>
        Second Level
        <ol>
          <li>Third Level</li>
          <li>Third Level</li>
        </ol>
      </li>
      <li>Second Level</li>
    </ol>
  </li>
</ol>

CSS Counters with different counter display in every level without extra classes

1 Answers