How to add different CSS style to every nth element, depending on n using LESS

Question

I am trying to add different padding to subsequent elements in a div. My DOM looks pretty simple.

   
0
           


        
                      

              相关标签:
       
      

Answer 1

Using less(but you have to set the num of elements):

.parent (@indexstart,@index) when (@indexstart < @index ){
  div:nth-child(@{indexstart}){
    padding-left: (@indexstart - 1) * 15px;
  }
  .parent (@indexstart + 1,@index);
}
.parent (1,4);

See example

Answer 2

I suppose you want to achieve a stair visually. In this case you can do it like below:

.parent {
  line-height: 1.2em;
}

.parent>div:not(:first-child)::before {
  content: "";
  float: left;
  width: 15px; /*your padding*/
  height: calc(1.2em + 2px);

}

<div class="parent">
  <div>0</div>
  <div>15</div>
  <div>30</div>
  <div>45</div>
  <div>60</div>
  <div>75</div>
</div>