Menu
I am trying to add different padding to subsequent elements in a div. My DOM looks pretty simple.
<div class="parent">
<div>0</div>
<div>15</div>
<div>30</div>
...
</div>
So I would like for my first element to have 0 padding, my second 15, third 30 etc. Using LESS, how could I make this work? I have tried:
.parent div:nth-of-type(n) {
padding-left: n*15px;
}
Thank you!
548
The :nth-of-type(n) selector matches every element that is the nth child, of the same type (tag name), of its parent. n can be a number, a keyword (odd or even), or a formula (like an + b). Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.
formula (an + b) In addition to the value n being able to be any number, you can also use a formula. nth-child(3n) would affect every third child element. nth-child(3n+1) would apply to every third element starting from the first one.
As a general rule, if you want to select an interval of a selector regardless of the type of element it is, use nth-child . However, if you want to select a specific type only and apply an interval selection from there, use nth-of-type .
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
