Use css variable in nth-child(3n + 3) instead of 3

i'm trying to use a CSS variable in a nth-child() selector, im using li:nth-child(3n+3) to give every third <li> a certain style.

this topic turned out to be very hard to google, i could not find any result for my use case.

currently my code looks roughly like this:

li {
  width: 25%;
  margin-right: 12.5%;
}
li:nth-child(3n+3) {
  margin-right: 0;
}

i want to refactor my code so it can be easily changed, but i can't figure out how to use CSS variables in the :nth-child(3n+3) selector. i want to achieve something like this:

:root {
  --number: 3;
}
li {
  width: calc(100% / (var(--number) + 1));
  margin-right: calc((100% / (var(--number) + 1)) / (var(--number) - 1));
}
li:nth-child(var(--number)n + var(--number)) {
  margin-right: 0;
}

sadly, the :nth-child(✖n + ✖) does not work as expected when using vars instead of numbers. my goal is to adjust the whole style with the one --number variable.

i created a codepen example: https://codepen.io/hergi/pen/xxRrmGv

any ideas/keywords or sources to help me solve this issue are highly appreciated, thanks in advance



Read more here: https://stackoverflow.com/questions/66272138/use-css-variable-in-nth-child3n-3-instead-of-3

Content Attribution

This content was originally published by SHRX at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: