Iterating Through CSS Elements [duplicate]

Question

I'm re-learning CSS and I was wondering how I would do something like this:

li:nth-child(n) {
    display: block;
    animation: animate 500ms ease-in-out forwards;
    animation-delay: calc(n * 200ms);
}

Where n is the current li element and the delay is equal to n * 200ms

Answer 1

Currently, there are no ways for CSS to create selectors by iterating over a range.

However, you can use SCSS, which is a CSS preprocessor that extends the language and produces in output a valid CSS file.

In SCSS, your code would look like:

@for $i from 1 through 3 {
  li:nth-child(#{$i}) {
    display: block;
    animation: animate 500ms ease-in-out forwards;
    animation-delay: calc($i * 200ms);
  }
}