Coloring the text depending on numeric value using css

Question

I want to color text based on its value, using css.

ie. if value is less than 20 --> red ,
    if value is between 20 - 60 --> orange , 
    if value is greater than 60 to 100--> green.

I don't want to add any class in the template depending on the value.

I found this Link: How do I change the background color with JavaScript? but it doesn't suffice as I have too many values to apply color to. Also I want it to be more maintainable when adding new values in future.

Without adding a class? the only way you can do this add class dynamically depending on value for text color. Using if...else or switch — Kiran Shinde, Aug 04 '15 at 07:39
Please give us an example of your code so we can provide you a working solution (ie: post on [JSFiddle](https://jsfiddle.net/) — rebrec, Aug 04 '15 at 07:40
Can't you make use of [`rgb` / `rgba` / `hsl`](http://www.w3.org/wiki/CSS/Properties/color/RGB)? see also [the browser support by mozilla](https://developer.mozilla.org/en/docs/Web/CSS/color_value) — bufh, Aug 04 '15 at 07:41
Not only do you want to style based on the content of the element (which isn't possible as of yet), you also want to style conditionally with that content. CSS isn't built for that. — Purag, Aug 04 '15 at 07:43
Yeah.. You've got no chance without putting a script in there. — Jay, Aug 04 '15 at 07:46
possible duplicate of [Is there a way to hide a data cell based on a specific value using just HTML/CSS?](http://stackoverflow.com/questions/29499952/is-there-a-way-to-hide-a-data-cell-based-on-a-specific-value-using-just-html-css) — areim, Aug 04 '15 at 09:50

score 19 · Answer 1 · edited Aug 07 '21 at 13:44

19

It is not possible only with CSS.

You have to use JavaScript/jQuery to dynamically add the color, based on an object color match, and test if the value in the data-color HTML attribute is between the range for each element.

The JS code dynamically check if the element attribute is in a color range and apply the matched color.

If you will have to add some color and range in the future, simply add new values in the colorMatch hash, and update your CSS color class list.

##CSS

.red {color:red}

###HTML

<p data-color="19">Lorem 19</p>

###JS

var colorMatch = {
    '0-19'     : 'red',
    '20-59'    : 'orange',
    '60-100'   : 'green'
 };

Here is the working fiddle

edited Aug 07 '21 at 13:44

ctacke

66,480
18
94
155

answered Aug 04 '15 at 09:39

Giacomo Paita

1,411
2
12
21

This approach seems to be very maintainable. thank you. – anandharshan Aug 20 '15 at 19:24
What happens if `data-color="19"` is the result of an asp label instead of being "19"? – Zizzipupp Oct 11 '19 at 15:20
In this case, you can't use my JS: you have to previously know the result of the asp label, and code a script according to it. – Giacomo Paita Oct 13 '19 at 10:04

score 2 · Answer 2 · answered Jun 01 '22 at 15:59

If you do not consider it cheating to not use the actual innerHTML as a condition, but rather construct it from a CSS variable using content you could do something like this (just as an effort to not use JS in this case):

<num style="--num:1"></num>
<num style="--num:99"></num>
<num style="--num:165"></num>

num {
  --breakpoint: 100;
  --g: calc((clamp(0, var(--num), var(--breakpoint)) - calc(var(--breakpoint) - 1)) * 255);
  color: rgb(0, var(--g), 0);

}

num:after {
   counter-reset: variable var(--num);
   content: counter(variable);
}

In this scenario I am coloring any of the numbers green if they are above 100, but more rules can be added using the same method to serve your use-case.

With that said, I think there is probably no scenario where this would ever be useful, other than just technical trivia, as it is more readable to simply change the class of the element dynamically using plain JS. Still kinda fun way to use counter-reset and counter though.

Here is the same example on jsfiddle: https://jsfiddle.net/msz1aouc/24/

score -7 · Answer 3 · answered Aug 04 '15 at 08:03

-7

A simple approach could be HTML

<div class="content">
    <p>high</p>
</div>
<div class="content">
    <p>low</p>
</div>
<div class="content">
    <p>medium</p>
</div>
<div class="content">
    <p>critical</p>
</div>
<div class="content">
    <p>high</p>
</div>

Jquery
var content = $(".content p").text();

    if (content == "high") {

        $(this).css("color", "#ffffff");
    }
   if (content == "low") {

        $(this).css("color", "#ccc");
    }
   if (content == "critical") {

        $(this).css("color", "#000");
    }

answered Aug 04 '15 at 08:03

Megha Nagpal

170
4

4

Your code does not answer the question. You are matching exact text values, but the problem was about matching int values in some intervals – areim Aug 04 '15 at 09:52
I like it, Just add .valueOf() to convert to numeric and do a numeric case. – Edgy Aug 30 '20 at 02:42

Coloring the text depending on numeric value using css

3 Answers3

Linked