Styling a hint for relative numerical value
Background:
I have a list of elements in a browser which each are a numerical distance away from the same origin point. I want to give a visual hint to quickly give a feeling for how far a list-item is away from the origin. My Idea for that was to use color and opacity rgba(15,15,15,0.5), where the closest List Item is a 1 (rgba(15,15,15,1)) and those further away have an opacity of 1/distance (e.g. 1/5 rgba(15,15,15,0.2)).
I can set the opacity by directly setting style with javascript li.setAttribute("style", `background-color:rgba(15, 15, 15,${1/distance*0.9 + 0.1}`); But that kills my CSS for li.#hover { background: lightgrey} since inline style trumps the style declared in the css file. So I use text-color. In addition, I need to define the styling in Javascript as opposed to the css file, which feels out-of-place, towards organizing my CSS.
My list are topics, which have a numerical distance to another topic:
- is the closest, 2-5 are mid-distance, 6-7 are furthest away.
Questions:
How should I style a data-based numerical gradient in CSS? Is there a better way than background-color and opacity? Do I have to do this with JavaScript, or can I somehow do this in *.css ([data-] attributes won't work)? Does anyone know an example of such data-based gradients used elsewhere?
I really like the idea of having the visual hint for distance for easy list-scanning, but my solution just feels shoddy. Both visual-design wise, and coding-wise.