使用CSS / HTML / Python / SASS（但不使用JS）根据值更改表格单元格背景的颜色？ 无需动态

Question

I have a local HTML file with a table. A python script is updating the HTML using some input,so when I open it via browser,I see it,and when I manually(not automatic) press refresh, the new value appears,and my goal is to based on that update the color of the cell. Something like if the value is,say

<td id="cell_1">Blue</td>

The color will be blue:

#cell_1 {
    background-color: blue;
}

But if the value is

<td id="cell_1">Green</td>

The color will be

#cell_1 {
    background-color: green;
}

I know that this is possible using JS,but I'd prefer something using Python or SASS. I'm using Beautiful Soup to update the HTML,maybe there is a similar library to CSS? Thanks in advance

Answer 1

If you can change html, you can also change the class of the cell depending on value like so:

<td id="cell_1" class="blue">Blue</td>

or

<td id="cell_1" class="green">Green</td>

and then target with CSS

.blue {background-color: blue; }

Otherwise I think it's not possible with pure CSS. Also please notice "blue" and "green" are not semantic class names but without knowing what you're trying to achieve it hard to tell how to name them. "success" for example, will be better.

Answer 2

In my opinion, you need to know which colors are available for the background. Let's say you have green and blue; white class for both of them:

.green_background {
    background-color: green;
}

.blue_background {
    background-color: blue;
}

And then pass the value of class to your HTML element, instead of trying to change it in CSS dynamically.

<td class="green_background">Green</td>