CSS: Limit indentation on nested <ul>

Question

I have a nested <ul> list that is rendered like this:

- 1
  - 1.1
    - 1.1.1
      - 1.1.1.1
        - 1.1.1.1.1
        - 1.1.1.1.2
      - 1.1.1.2
      - 1.1.1.3
    - 1.1.2
  - 1.2

I'd like to limit with CSS the maximum depth of how the list is rendered (not the maximum level of list nesting. The html should remain exactly the same) to, say, 3 levels, so the list is rendered like this:

- 1
  - 1.1
    - 1.1.1
    - 1.1.1.1
    - 1.1.1.1.1
    - 1.1.1.1.2
    - 1.1.1.2
    - 1.1.1.3
    - 1.1.2
  - 1.2

Can it be done with just CSS?

Answer 1

You can target the nested lists starting from a particular depth:

ul > li > ul > li ul {
  margin: 0;
  padding: 0;
}

<ul>
  <li>aaaa</li>
  <li>aaaa</li>
  <li>
    <ul>
      <li>aaaa</li>
      <li>aaaa</li>
      <li>aaaa</li>
      <li>
        <ul>
          <li>aaaa</li>
          <li>
            <ul>
              <li>aaaa</li>
              <li>aaaa</li>
            </ul>
          </li>
          <li>aaaa</li>
          <li>
            <ul>
              <li>aaaa</li>
              <li>
                <ul>
                  <li>aaaa</li>
                  <li>aaaa</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>aaaa</li>
</ul>

Or like this:

ul > li > ul > li > ul > li ul {
  margin: 0;
  padding: 0;
}

<ul>
  <li>aaaa</li>
  <li>aaaa</li>
  <li>
    <ul>
      <li>aaaa</li>
      <li>aaaa</li>
      <li>aaaa</li>
      <li>
        <ul>
          <li>aaaa</li>
          <li>
            <ul>
              <li>aaaa</li>
              <li>aaaa</li>
            </ul>
          </li>
          <li>aaaa</li>
          <li>
            <ul>
              <li>aaaa</li>
              <li>
                <ul>
                  <li>aaaa</li>
                  <li>aaaa</li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>aaaa</li>
</ul>