Use variables inside :nth-child(n + x) pseudo class - css

Question

At the moment I have a snippet of LESS that will basically shift each subsequent child further down from the top:
&:nth-child(n+2) {
top: #alertTop + 10px;
}
&:nth-child(n+3) {
top: #alertTop + 20px;
}
&:nth-child(n+4) {
top: #alertTop + 30px;
}
Is there anyway to use the 'x' part of 'n+x' in the calculation so that I don't have to manually add these?
I.e. something like:
&:nth-child(n+x) {
top: #alertTop + (x * 5px);
}
LESS/CSS only methods preferred.

Answer 1

From the documentation: Create a mixin that calls itself, along with a guard expression:
LESS
#test {
#child-count: 5;
#child-height: 100px;
position: relative;
height: #child-count * #child-height;
> div {
position: absolute;
left: 0;
right: 0;
height: #child-height;
background: red;
}
.loop(#i) when (#i <=5) {
> :nth-child(#{i}) {
top: (#i - 1) * #child-height;
}
.loop(#i + 1);
}
.loop(1);
}
Result
#test {
position: relative;
height: 500px;
}
#test > div {
position: absolute;
left: 0;
right: 0;
height: 100px;
background: red;
}
#test > :nth-child(1) {
top: 0px;
}
#test > :nth-child(2) {
top: 100px;
}
#test > :nth-child(3) {
top: 200px;
}
#test > :nth-child(4) {
top: 300px;
}
#test > :nth-child(5) {
top: 400px;
}
CodePen