CSS3 Nth-child set dynamic left position [duplicate]

Question

I have 20 child div in parent div. I want to set the dynamic left position of each child div. I want to do that using CSS.

I am aware of nth-child, but it's not working with nth child because nth-child will apply same left values.

For example:

#bars {
  height: 30px;
  left: 50%;
  margin: -30px 0 0 -20px;
  position: absolute;
  top: 50%;
  width: 400px;
}

.bar {
  background: #666;
  bottom: 1px;
  height: 3px;
  position: absolute;
  width: 3px;
  animation: sound 0ms -800ms linear infinite alternate;
}

.bar:nth-child(1) {
  left: 1px;
  animation-duration: 474ms;
}

.bar:nth-child(2) {
  left: 5px;
  animation-duration: 433ms;
}

.bar:nth-child(3) {
  left: 9px;
  animation-duration: 407ms;
}

.bar:nth-child(4) {
  left: 13px;
  animation-duration: 458ms;
}

.bar:nth-child(5) {
  left: 17px;
  animation-duration: 400ms;
}

.bar:nth-child(6) {
  left: 21px;
  animation-duration: 427ms;
}

.bar:nth-child(7) {
  left: 25px;
  animation-duration: 441ms;
}

.bar:nth-child(8) {
  left: 29px;
  animation-duration: 419ms;
}

.bar:nth-child(9) {
  left: 33px;
  animation-duration: 487ms;
}

.bar:nth-child(10) {
  left: 37px;
  animation-duration: 442ms;
}

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Codepen.

I want to set the left of each n-th child dynamically. Is it possible to add the left of the element dynamically using nth-child?

As you can see I have set the left static. I defined left value for each child element. While I want to set it dynamically. For example:

div:nth-child(2n) {
  left: n * 15;
}

Is there possible like this?

Answer 1

This is not possible using pure CSS. There are two options.

Use a CSS preprocessor

This can work as follows.

.bar {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;
}

@for $i from 1 through 15 {
  .bar:nth-child(#{$i}) {
    left: ($i * 10px);
  }
}

This CSS is then evaluated to the following. You can include that on your page and enjoy not having to type all of it out manually, while the browser can still process it as such.

.bar {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;
}

.bar:nth-child(1) { left: 10px; }
.bar:nth-child(2) { left: 20px; }
.bar:nth-child(3) { left: 30px; }
.bar:nth-child(4) { left: 40px; }
.bar:nth-child(5) { left: 50px; }
.bar:nth-child(6) { left: 60px; }
.bar:nth-child(7) { left: 70px; }
.bar:nth-child(8) { left: 80px; }
.bar:nth-child(9) { left: 90px; }
.bar:nth-child(10) { left: 100px; }
.bar:nth-child(11) { left: 110px; }
.bar:nth-child(12) { left: 120px; }
.bar:nth-child(13) { left: 130px; }
.bar:nth-child(14) { left: 140px; }
.bar:nth-child(15) { left: 150px; }

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Use JavaScript

This can work as follows.

{
  let i = 0;
  for (let bar of document.querySelectorAll('.bar')) {
    bar.style.left = (10 * ++i) + 'px';
  }
}

.bar {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;
}

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Note that jQuery is not needed for something so simple.

And a version that does not use ES6 syntax (let and for...of).

var i, bars = document.querySelectorAll('.bar');
for (i = 0; i < bars.length; ++i) {
  bars[i].style.left = (10 * (i + 1)) + 'px';
}

.bar {
  position: absolute;
  top: 10px;
  width: 5px;
  height: 5px;
  background: #555;
}

<div id="bars">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Both versions use querySelectorAll.