# how to make nth-child include a range (eg. 0-19)
**URL:** https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927
**Category:** web dev
**Created:** [October 23, 2019, 6:13pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927 "2019-10-23T18:13:14Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)
#### Post date: [October 23, 2019, 6:13pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/1 "2019-10-23T18:13:14Z")
hi all,
I have a bit of css code and each div child needs to have a property.
Hence it looks like this. It goes from 0 all the way to 19.
```
div:nth-child(0) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 0 * -1px)); }
div:nth-child(1) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -1px)); }
div:nth-child(2) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 2 * -1px)); }
[...]
div:nth-child(17) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 17 * -1px)); }
div:nth-child(18) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 18 * -1px)); }
div:nth-child(19) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 19 * -1px)); }
```
Is there a way that I can make it so it understands 0-19 in one line only?
Any ideas?
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 23, 2019, 8:26pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/2 "2019-10-23T20:26:17Z")
Using just CSS, that is a bit tricky. Are you looking for a pure CSS-only solution, or would you be ok with a little bit of JavaScript thrown in there?
🙂
---
### Author:  [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)
#### Post date: [October 23, 2019, 8:40pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/3 "2019-10-23T20:40:01Z")
sure
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [October 24, 2019, 1:07am UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/4 "2019-10-24T01:07:16Z")
Or sass?
[https://jsfiddle.net/41ykz0se/](https://jsfiddle.net/41ykz0se/)
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 25, 2019, 4:49am UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/5 "2019-10-25T04:49:02Z")
One approach would be to make your style rule look like this:
```
div {
transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * var(--count) * -1px));
}
```
Notice that I added a variable called `--count` to represent 0, 1, 2, …, 19. On each div, you can programmatically set the --count variable. This tutorial covers how to do that: [https://www.kirupa.com/html5/css\_variables\_js\_win.htm](https://www.kirupa.com/html5/css_variables_js_win.htm)
By setting the count value on each `div` element, that will carry over into the appropriate value you will need. Does this make sense? I am kinda rushing the explanation while I am wrapping something else up 😛
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [October 25, 2019, 2:35pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/6 "2019-10-25T14:35:48Z")
I was hoping that attr() would work in this context too so count could be set in the html and not through JS, but it looks like its not that well supported yet.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 26, 2019, 12:09am UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/7 "2019-10-26T00:09:28Z")
That was my first thought, but it didn’t work for browser support reasons like you mention 💹
---
### Author:  [@prg9](https://forum.kirupa.com/u/prg9)
#### Post date: [October 26, 2019, 3:18pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/8 "2019-10-26T15:18:03Z")
I wonder if this person will ever be back? I find it rather amazing on [how many forums this question was actually asked](https://www.google.com/search?q=%22how+to+make+nth-child+include+a+range+%28eg.+0-19%29%22). Interestingly here at Kirupa it seemed to yeild the most discussion, so nice job peeps. 👍
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [October 26, 2019, 3:26pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/9 "2019-10-26T15:26:05Z")
Whoa, [dude on SO](https://stackoverflow.com/a/58528842) showing you can set vars in `style` attributes… which I guess makes sense.
```
19
```
but that would get around the attr() limitation.
---
### Author:  [@prg9](https://forum.kirupa.com/u/prg9)
#### Post date: [October 26, 2019, 4:14pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/10 "2019-10-26T16:14:22Z")
Yes I too liked that aspect when I saw it on SO. You could couple it with a bit of JS and dynamically create and style the divs.
---
### Author:  [@mtjr](https://forum.kirupa.com/u/mtjr)
#### Post date: [October 28, 2019, 1:26pm UTC](https://forum.kirupa.com/t/how-to-make-nth-child-include-a-range-eg-0-19/640927/12 "2019-10-28T13:26:42Z")
i had this problem before thank u guys