Question

I want to define a set of CSS rules for my FlexTable in GWT. I’ve defined 4 different rules for all combinations of odd and even.

.myTable tbody tr:nth-child\(odd\) td:nth-child\(odd\) {
    background: #EEEEDD;
}

It works very well, but now I want to define separate style for first row of table. I tried to do something like this:

.myTable tbody tr:first-child {
    background: #123456;
}

but it doesn’t work with 4 previous rules. It is ignored. Do you have any suggestions how to define separate style for the first row of table?

Answer 1

Since you applied the background to the td elements in your first rule, you need to apply it to the td elements in the second rule.

Assuming you want the same different background for all cells in the entire first row:

.myTable tbody tr:first-child td:nth-child\(even\), 
.myTable tbody tr:first-child td:nth-child\(odd\) {
    background: #123456;
}

To make that shorter, here’s a trick, using :nth-child(n) to match all td elements:

.myTable tbody tr:first-child td:nth-child\(n\) {
    background: #123456;
}