CSS3 Nth-child set dynamic left position

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?

If you gave some details about what you are trying to achieve, it would be helpful, because you can achieve such a visual result without absolute positioning/dynamically set left value: https://codepen.io/anon/pen/XRXbdJ — fabienheureux, Apr 19 '17 at 06:29
As you can see i have set the left static. left value defined for each child element. while i want to set dynamically. for ex: div:nth-child(2n){left:n*15;} is there possible like this? — jack, Apr 19 '17 at 06:31
Please [edit](//meta.stackexchange.com/q/21788) that into your question, @jack, it will help people who try to answer your question. Are you okay with using a CSS preprocessor? — Just a student, Apr 19 '17 at 07:07
I am not looking for animation duration... i am looking for dynamic left value. as i need to add static value for all nth-child is there any css property or trick possible to calculate left dynamically for each child div? — jack, Apr 19 '17 at 07:32
@jack possible with jquery or css preprocessor's only not with normal css. — Sahil Dhir, Apr 19 '17 at 07:34
@sahil can you please help me with that? i want to make it dynamic. — jack, Apr 19 '17 at 07:35
do you want jquery solution or css preprocessor solution? but problem is if you use css preprocessor then whole of your app will have to be in css preprocessor code. So I will recomment you jquery — Sahil Dhir, Apr 19 '17 at 07:37
@SahilDhir ok if possible to set left dynamically for each child then please share jquery code. — jack, Apr 19 '17 at 07:39

Just a student · Accepted Answer · 2017-04-19T12:40:56.023

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.

Thanks for help! where do i put css processor code? does it work in .css file? Actully i have no idea about css processor. so if you can share any good resource that would help to people like me to understand css processor. — jack, Apr 19 '17 at 12:37
You put it in a separate file and generate a CSS file from it. You can learn more [here](http://sass-lang.com/install), or [try it online](http://www.sassmeister.com/). — Just a student, Apr 19 '17 at 12:39

CSS3 Nth-child set dynamic left position

1 Answers1

Use a CSS preprocessor

Use JavaScript