Question

I have the following CSS:

.tableStatic tbody tr { border-top: 1px solid #e7e7e7; }
.tableStatic tbody tr:nth-child(even) { background-color:#f5f5f5; }

I want to change the background of certain “holiday” rows as follows

.tableStatic tbody tr { border-top: 1px solid #e7e7e7; }
.tableStatic tbody tr:nth-child(even) { background-color:#f5f5f5; }
.tableStatic tbody tr .holiday {background-color: #778899;}

How ever it doesn’t work. The background color is changed but it is using #f5f5f5 instead of #778899

Any pointers?

Answer 1

You have a space there:

.tableStatic tbody tr .holiday {background-color: #778899;}

Remove it and it should work.

.tableStatic tbody tr.holiday {background-color: #778899;}