CSS: ограничение отступа для вложенных <ul>

Question

У меня есть вложенный список <ul>, который отображается следующим образом:

- 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

Я бы хотел ограничить с помощью CSS максимальную глубину отображения списка (а не максимальный уровень вложенности списка. HTML должен оставаться точно таким же), скажем, до 3 уровней, поэтому список отображается следующим образом это:

- 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

Можно ли это сделать только с помощью CSS?

Answer 1

Вы можете выбрать целевые списки, начиная с определенной глубины:

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>

Или вот так:

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>