I know this is an old question, and similar questions (solved) are even more complicated. But I've tried and couldn't figure it out myself.
I have
<div style="color:white; padding:10px">Text</div>
I want to change its color to red:
div[style*="color:white"]{color:red}
$('div').filter(function() {
return $(this).css('color') == 'white';
}).css("color", "red");
I tried both css and javascript, with or without whitespace, use either hex or RGB color code.
The issue is that it's not returning what you're expecting. It's actually returning an RGB string rgb(255, 255, 255), rather than 'white'. Change that and you're golden.
Actually $(this).css('color') returns rgb(255, 255, 255) so you can use
$('div').filter(function() {
return $(this).css('color') == 'rgb(255, 255, 255)';
}).css("color", "red");
In JQuery API document of .css(), the following sentence is written.
"Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255)."
So, I think the simply return $(this).css('color') == 'rgb(255, 255, 255)'; may also has some problem in the future.
And here I suggest use css class to implement it as the following:
.white{color:white;}
.red{color:red;}
$('div').filter(function() {
return $(this).hasClass('white');
}).removeClass('white').addClass('red');
And why div[style*="color:white"]{color:red} does not work, this is because inline css has the highest priority out of the three ways.
Inline CSS takes over any internal or external stylesheet. If you have the ability to remove the inline css on that particular element and replace it with something like <div class="myElememt"></div> that would be ideal. As for using jQuery I got it to change by using the CSS method without the filter:
$('div').css('color', 'blue');
You're doing something very funky there, the filter function shouldn't be used like that. To select a dom element and change its css with jquery do this $('div').css({'color': 'red'});
Here's a working example
For a proper introduction to jquery I'd recommend this video by the amazing Chris Coyer
console.logoralert? You'll immediately see what's happening...console.log($(this).css('color'))