Legal style list counters in CSS

Question

I'm struggling to format my lists in a legal style, I want to achieve something like this for my privacy policies and terms of use

1. Cookies 
    1.1 We use the following cookie 
       a) strictly necessary cookies 
       b) analytic cookies 
    1.2 You can block cookies 
    1.3 We may use third-party cookies
2. Collection of information
    2.1 For the purposes outlined in Clause 2, we may collect and process the following information about you:
       a) Information you give us
          (i) when you report any problem to us
          (i) when you use certain features on our site

The problem I'm having is with my counters and the second level, 1.1, 1.2 etc This is the CSS I have so far, I've attached the rendered results and the example from the word doc I'm trying to emulate

.privacy-policy-list {
    counter-reset: item;
}

.privacy-policy-list li li:before {
    counter-increment: item;
    content: counters(item, ".") " ";
}

.privacy-policy-list ol li ol li {
    list-style-type: lower-alpha !important;
    padding-left: 5em;
}

.privacy-policy-list ol li ol li ol li{
    list-style-type: lower-roman !important;
}

I don't know what I'm doing wrong and would be grateful for your help to point me in the right direction, thanks

Possible duplicate - https://stackoverflow.com/questions/10405945/html-ordered-list-1-1-1-2-nested-counters-and-scope-not-working — Paulie_D, Jan 15 '20 at 10:52

score 3 · Accepted Answer · answered Jan 15 '20 at 11:14

Assuming you have a four level ol, you need to change the list style type of the third and fourth levels ol and remove the content of the pseudo element on the li from them:

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

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

ol ol ol li::before {
  content: '';                         /* remove third level content (probably better to give a class to the third level ol rather than using this selector) */
}

ol ol ol {
  list-style-type: lower-alpha;        /* set third level to alpha (probably better to give a class to these ol rather than using this selector) */
}

ol ol ol ol {
  list-style-type: lower-roman;        /* set fourth level to roman (probably better to give a class to these ol rather than using this selector) */
}

<ol>
  <li>
    Collection of information
    <ol>
      <li>
        For the purposes outlined in Clause 2, we may collect and process the following information about you:
        <ol>
          <li>
            Information you give us
            <ol>
              <li>when you report any problem to us</li>
              <li>when you use certain features on our site</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
  <li>
    Collection of information
    <ol>
      <li>
        For the purposes outlined in Clause 2, we may collect and process the following information about you:
        <ol>
          <li>
            Information you give us
            <ol>
              <li>when you report any problem to us</li>
              <li>when you use certain features on our site</li>
            </ol>
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Thank you very much, this is exactly what I'm after, With your help I've learnt a lot today about list styles, css counters and css selectors, Thank you very much — Christian Marth, Jan 15 '20 at 18:16

Legal style list counters in CSS

1 Answers1

Related