CODEWITHSUNDEEP
jquerycss
Mesh
Mesh

Reputation: 6462

When does CSS get resolved/evaluated?

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?

Upvotes: 1

Views: 227

Answers (2)

fcalderan
fcalderan

Reputation:

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

Upvotes: 1

Z. Zlatev
Z. Zlatev

Reputation: 4820

Just create a new rule:

.red { background: red; } // to be safe and sure, you can make it important

Apply it via jQuery when needed by .addClass() or form the backend

Upvotes: 0

Related Questions