· javascript
Re-Implementing :nth-child() With Modern CSS
The title sounds a bit strange, right?
Why re-implement an existing feature, that’s completely useless! The first reason is to be able to adjust the :nth-child() arguments on the fly.
Let’s suppose you have the following: div:nth-child(5n + 8) { background: red; } And you decide to update the 5 or the 8. The only way is to manually rewrite the selector, which isn’t ideal.
We cannot have something like the below where you can change the variables as you want: .container { --A: 5; --B: 8; } .container > div:nth-child(var(--A)*n + var(--B)) { background: red; } With my implementation, you will be able to do it! The second reason is to have fun and play with some new features. You will probably never need to rely on a dynamic :nth-child() selector, but I am sure you will learn one or two useful tricks along the way.
