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

CSS variables have almost universal support on all modern browsers and can achieve virtually the same desired effect as @GreatBlake's answer using attr plus more. Instead of defining data in a user-defined attribute, you can define it as a custom property in the style attribute and get the value of those custom properties using the var() function:

span.anim {
  animation-delay: calc(var(--n) * 0.5s);
}