CSS - prioritizing css rules

Question

I have a projects table with odd and even row coloring for a better view:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

I also have a code that checks if the project is late and if so i color all the project row in red (instead of the usual coloring of the even and odd rows)

Also, each row has a class and the class name depends if the project is late or not. The classes are:

.redBackground {background-color:#CD5C5C;}

.yellowBackground {background-color:#FFFF00;}

.noBackground {}

The problem is that no matter which class the row is having, the css of the even-odd rows always "wins" so i never see the red or yellow background. How i make it work so in case of a late due date, it will show the red and yellow classes and in the regular case it will be odd or even?

Answer 1

Use a selector with higher specificity, e.g.

table tr.redBackground {background-color:#CD5C5C;}

Answer 2

You can use parent selector, for your case this should work:

tr.redBackground {background-color:#CD5C5C;}

tr.yellowBackground {background-color:#FFFF00;}

Or,

#parent_div .redBackground {background-color:#CD5C5C;}

#parent_div .yellowBackground {background-color:#FFFF00;}

Answer 3

Why not do something like this in java script. Assuming you know which rows are for later project.

if( project is late ){

  document.getElementById("MyElement").className = "redBackground";

}

Keep default class as odd and even and in case of late project change the class. Assuming you don't mind changing class programmatically.

Answer 4

Try using !important

.redBackground {background-color:#CD5C5C !important;}

.yellowBackground {background-color:#FFFF00 !important;}