The community member has been using global root and CSS variables in Webstudio to remove a lot of custom styles and classes. They have a CSS-only slider and want to find a better way to handle the nth-child items, as they would need to manually increment them if they add another slide. A community member suggests using the CSS attr() function, which would allow defining the animation delay once and having the specific value come from attributes on the element. The original community member acknowledges this suggestion has helped them progress, though they haven't fully implemented it yet.
With the global root and CSS vars coming to life in Webstudio, I've been able to remove a ton of custom styles and classes. I want to remove the following code block and am looking for better ways to handle the nth-child items, as I'd need to manually increment them if I add another.
(this is a CSS-only slider that I've made, so I'd like to avoid JS)