Clever Geek Handbook

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

At the moment I have a LESS snippet that will basically move each subsequent child further down:

    &:nth-child(n+2) {
        top: @alertTop + 10px;
    }

    &:nth-child(n+3) {
        top: @alertTop + 20px;
    }

    &:nth-child(n+4) {
        top: @alertTop + 30px;
    }

Do I need to use the "x" part of the "n + x" in the calculation so that I don't have to manually add them?

those. something like:

    &:nth-child(n+x) {
        top: @alertTop + (x * 5px);
    }

Only LESS / CSS methods are preferred.

+3


source to share


1 answer


From the documentation : Create a mixin that calls itself, along with a guard expression:

SMALLER

#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

+2


source






More articles:


All Articles