3

As I asked in Is it possible in css to give a color name an alternative HEX value? and apparently no one understand what i was asking probably due to my bad way of questioning, I think I should repost the question with some better wording:

There is a website which have codes like the following written in its page as exampled follow:

    <span style="color:red;">+3000</span>
    <span style="color:green;">-2000</span>
    <span style="color:red;">+1500</span>
    <span style="color:red;">+4200</span>
    <span style="color:green;">-100</span>
    <span style="color:black;">+/-0</span>

The above code are written on the original site and i cannot change it or add class/id on to those html tags. But now i want to create a separate CSS stylesheet that make anyone who load the stylesheet would see those plus items (that mark as red in the original code) in green color, and those minus items (that mark as green in the original code) in red color. Can it/How can it be done?

Community
  • 1
  • 1
user930067
  • 276
  • 3
  • 10

1 Answers1

3

You can use the attribute/value selector as follows;

[style*="color:red"] {
    color: green !important;
}

[style*="color:green"] {
    color: red !important;
}

You need to use the !important keyword to avoid the browser using the inline value.

worldofjr
  • 3,868
  • 8
  • 37
  • 49
  • You *will* need to use the `!important` modifier. – BoltClock Aug 26 '14 at 18:03
  • The syntax is still incorrect - you need to wrap the attribute value in quotes. Also, `~=` can't be used for matching inline style attributes, I suggest `*=` instead. – BoltClock Aug 26 '14 at 18:06