Question

I have a list of divs, each with a ‘createdDate’ attribute, I evaluate each div’s createdDate,
I add another attribute ‘isNew’ , if it is less than 7 days old set true, false otherwise.

The css has:

div[isNew=true] div.title{ background:red } 

intending to set the background red when is less than 7 days.

using firebug and ie Dev tools – shows the background as set red, by the matching rule.

The browser is not displaying the title div in red though.

is there a way to nudge the css evaluation to redraw? or a better way?

Answer 1

Since this snippet http://jsfiddle.net/fcalderan/Gh7Ud/ works as expected I would suggest to check markup and remaining css rules, probably you redefine after that style somewhere

Note: your code requires an attribute ‘isNew‘: if you are in control of html code, it’s better if you make it future-proof changing it as ‘data-isNew‘

As suggested by Zlatev, creating a class ‘ad hoc’ it’s another solution and this will ensure crossbrowsing, because oldest browser doesn’t recognize the CSS attribute selector. BTW I only suggest to not use a .red class because it would be too much bound to the element style (what if you change the colour?), so it’s better preferring a semantic class, like .newtitle