Is it possible to use the nth-child value as a parameter in a property? (and how)

Question

Short description (tl;dr;)

Is there a \"pure CSS\" way (not Less/Sass) of using the value of the nth-child inside the CSS properties? Something like t

Answer 1

There is a very experimental CSS function for using attributes as properties for an element. Currently it only works on pseudo elements, so you'd have to consider coming up with some kind of clever re-working of your markup in this use case.

You could put the offset in a data-attribute on your markup (or with JS), and then use something like the following:

/* attr(name, units, fallback) */
span.anim {animation-delay: attr(offset, 1) * 0.5s;}

Please keep in mind that this is still a ways off from being widely accepted, and like I mentioned before, the above syntax wouldn't work currently because it would need to use pseudo elements like :after.

At the very least, it's something fun to think about.