2

I have a set of classes named class1 up to classN, and I want each class classK to get the color rgb(k%256, 0, 0). N in this case is dynamic and has no theoretical upper limit, as the elements with these class names are generated based on user input and some js code.

I was thinking of having CSS kind of like this:

class[k]{
    color: rgb(k%256, 0, 0);
}

However, I have found no way of making CSS rules that vary based on a variable in the class name.

I briefly explored trying to use CSS variables, but those are more like constants and can't accommodate all classes 1 to N simultaneously.

Alternatively I could use javascript for the styling and have something like:

for(let i = 0; i < N; i++){
    document.getElementByClassName(`class${k}`).forEach(e => e.style = `color: rgb(${k}, 0, 0)`);
}

However, this is not very scaleable if I want to add more complex CSS (which I most likely will, the rgb value I'm using now is proof of concept), it is very inefficient and I much prefer having CSS handle as much of my styling as possible.

Looking around on the internet I did find this post on stackoverflow that asks pretty much the same question, and received an answer of "this is impossible". However, that post was barely viewed and from 2015, so there might be a new feature since then that could help me.

RattatAndyGo
  • 33
  • 4
  • 1
    As you are saying, css variables are more constant in the root, than real variables. I don't think you can do what you want directly in css. You could try SCSS, you define your formula, it will generate automatically all your class. So still a lot lines, but not written by you! – pier farrugia Dec 22 '22 at 16:50
  • You can use a combination of data attributes and sass. Something like this. https://codepen.io/Starnas/pen/yLEvBPY – Anas Mohammad Sheikh Dec 22 '22 at 18:04

0 Answers0