Manipulating with CSS

I am managing an application from a vendor which is very strict about customisation. My business team has asked for a simple requirment which has been rejected by the vendor however they did say if we wanted to modify the CSS ourselves we are welcome to do so. I don't have a lot of experiece with CSS so really need some help. i have attached a jpg of how the screen looks (query.jpg) the business wants the column called results to have a different back colour depending on it's value. If it is a negative number then it should be Red, If it is between 0 and 10 it should be yellow, 111 and above should be green.

I have attached also source generated from my browser (query.html) for the screen in the image. i have also attached the stylesheet used currently on that screen. (Acclist.css)

Any help appreciated.

 Image of screen query.htm acclist.css
Who is Participating?
Kyle HamiltonData ScientistCommented:
The table does have an id and a class, so you can access the td you're trying to manipulate using eq, or nth-child.

The problem is you need to add the JS (or a link to it and the jquery lib) to the source code. Will they allow you to do that?
You can not do what you want purely in css, the markup would need a different class on the column's cell depending on having a positive or negative value. Which it currently doesn't have. It would be fairly simple using css and a jquery function, but if you can't modify it to add a jquery function you won't be able to do it without the vendor making changes.
Actually even with jquery you would still need a common selector for the cell, which you would only get by modifying the source code that creates the table, which I imagine is the vendors responsability.
Good idea didn't think of using nth-child... just incase you get the go ahead:

	  $(".acc tbody tr td:nth-child(9)").each(
	  		if (parseInt($(this).text()) < 0){
				$(this).css('background', 'red');
			else if (parseInt($(this).text()) >= 0 && parseInt($(this).text()) < 11){
				$(this).css('background', 'yellow');
			else if (parseInt($(this).text()) >= 11){
				$(this).css('background', 'green');

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.