How to make nth-child include a range (eg. 0-19)

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?

I’m just wondering if this could be done with a counter instead…

It seems not. I think counters only work as content and can’t be used like a variable.
Though that get’s me thinking if there is a way with variables.

I don’t really understand the question?

You have 19 rules with 19 different property values. Unless you use a preprocessor and loop through one rule 19 times I don’t see how you can expect to apply 19 different values to 19 separate items.

Unless of course I have got the wrong end of the stick :slight_smile:

2 Likes