Как сделать чтобы теги по мере вложенности менялись стили?

Question

С каждой вложенностью у дива должен добавляться отступ в 10px

<div> //отступ 10px
  <div></div>//отступ 20px
    <div> //отступ 30px
      <div> //отступ 40px
        <div></div> //отступ 50px
      </div> //отступ 40px
    </div> //отступ 30px
  <div></div> //отступ 20px
</div> //отступ 10px

Буду очень благодарен за помощь!

Answer 1

А если так?

div {
  border: 1px solid red;
  padding: calc(10px * var(--i));
}

<div style="--i:1;">10
  <div style="--i:2;">20</div>
  <div style="--i:3;">30
    <div style="--i:4;">40
      <div style="--i:5;">50</div>
    </div>
  </div>
  <div style="--i:2;">20</div>
</div>

Answer 2

Задумка так себе, но имеет право на жизнь)

.start, .start div {
  display: inline-block;
  box-sizing: border-box;
}

.start {padding: 10px;}
.start > div {padding: 20px;}
.start > div > div {padding: 30px;}
.start > div > div > div {padding: 40px;}
.start > div > div > div > div {padding: 50px;}
.start > div > div > div > div > div {padding: 60px;}
.start > div > div > div > div > div > div {padding: 70px;}
.start > div > div > div > div > div > div > div {padding: 80px;}
.start > div > div > div > div > div > div > div > div {padding: 90px;}
.start > div > div > div > div > div > div > div > div > div {padding: 100px;}

<div class="start" style="background-color: red;">
  <div style="background-color: orange;">
    <div style="background-color: yellow;">
      <div style="background-color: green;">
        <div style="background-color: lightblue;">
          <div style="background-color: blue;">
            <div style="background-color: violet;">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать чтобы теги по мере вложенности менялись стили?

Ответы (2 шт):