Assigning css to an element based on the value in that element

Question

I am working on a web application which as a table few columns with some data in it. Particularly I have a column named Change binded with some data under it as follows

            <td data-bind="text: GradeName"></td>
            <td data-bind="text:Price"></td>
            <td data-bind="text:Change"></td>

The value of Change can be negative or positive but if its is negative I would like that value to be displayed in red else black.

May I know a good way to do it?

do you want to do it in pure CSS or would a javascript solution work? — CupawnTae, Jun 05 '15 at 19:40
@CupawnTae is it even possible to do something based on something inside a tag with css only at all? i'm not aware that you can. refrencing this stackoverflow, its been 3 years but I don't think its changed any: http://stackoverflow.com/questions/7787520/css-class-selector-to-select-text-inside-a-div — Daemedeor, Jun 05 '15 at 20:19
@Daemedeor no it's not. It is possible to do it based on attribute values, but not on the contents of an element. This is obviously Knockout, so the best solution is to use Knockout's css/style binding options. — CupawnTae, Jun 05 '15 at 21:08

CupawnTae · Accepted Answer · 2015-06-05T22:38:24.773

There is no CSS selector that will allow you to style an element based on its contents, so you won't be able to do this purely in CSS.

However, Knockout can do the styling for you as it binds the data: you can use a css binding or style binding. Here's a style binding example:

<td data-bind="text: GradeName"></td>
<td data-bind="text: Price"></td>
<td data-bind="text: Change, style: { color: Change<0 ? 'red' : 'black' }"></td>

Live demo:

ko.applyBindings({ GradeName:"grade", Price:"€100.0", Change:-10, OtherField:10 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table><tr>
  <td data-bind="text:GradeName"></td>
  <td data-bind="text:Price"></td>
  <td data-bind="text:Change, style: { color: Change<0 ? 'red' : 'black' }"></td>
  <td data-bind="text:OtherField, style: { color: OtherField<0 ? 'red' : 'green' }"></td>
</tr></table>

score 1 · Answer 2 · answered Jun 05 '15 at 20:03

1

You could do something like this:

td[data-bind*="text:Change:-"] { color: red; }

This rule only matches <td/>s which have an attribute of data-bind, and begin with text:-, indicating a negative number.

Example on CodePen

answered Jun 05 '15 at 20:03

MikeZ

858
1
7
20

@Dev said "the value of Change can be negative or positive" - regardless of what is likely I tried to answer OPs question as it was asked. Notice there's no value inside the ``... – MikeZ Jun 05 '15 at 20:08
There's that word "likely" again - sounds like we need @Dev to chime in and give us more details. You know what happens when you assume... – MikeZ Jun 05 '15 at 20:11
@MikeZ I agree, you can only do so much with the information given so the OP will decide what works best for them – AGE Jun 05 '15 at 20:16

AGE · Answer 3 · 2015-06-05T20:43:36.950

0

If you wish to use jQuery then here is my solution for you jsFiddle:

jQuery(document).ready(function(){
    var dataElem;
    jQuery('td').each(function(){
        dataElem = jQuery(this);
        if(dataElem.data('bind')){
            if(dataElem.data('bind').substr(dataElem.data('bind').indexOf(":") + 1) === "Change"){
                if(parseInt(dataElem.html()) < 0){
                    dataElem.css("background-color", "red");
                }
            }
        }
    });
});

The above code assumes that the positive/negative value will be found within the td element which is referenced by the data-attribute Change. I am happy to make changes to this answer upon clarification otherwise.

edited Jun 05 '15 at 20:43

answered Jun 05 '15 at 20:10

AGE

3,752
3
38
60

1

the value won't be in the data-bind attribute, also jquery has a special selector for $(":contains(text)"); see here: https://api.jquery.com/contains-selector/ – Daemedeor Jun 05 '15 at 20:29
@Daemedeor when you say that it won't be in the data-bind attribute, you mean it will be where? I should (and will) clarify that I am making the assumption that the OP means 'Particularly I have a column named Change binded with some data under it' and 'The value of Change can be negative or positive' by claiming that this data will be within the row like so: I am the data :D. Also thanks I will look into the - contains - got to get back to work for a bit stay posted – AGE Jun 05 '15 at 20:42
1

oh, i just inspected the loop a bit more, my mistake. it'll work. but it definitely is not fun, he should probably add a class to that td element so you don't have to parse the data-bind attribute to look for change, since he knows the td he wants to watch anyway, but still look into contains :p – Daemedeor Jun 05 '15 at 20:48

Assigning css to an element based on the value in that element

3 Answers3