css: apply rule on first <tr><th> if there are 2 <tr>

Question

Is it possible apply a rule at the first <th> of first <tr> if there are 2 or more <tr> in <thead>?

I did:

table tr:first-child th:first-child 

but if there is only 1 <tr> ti apply anyway.

Answer 1

You can use a combination of the :not() and :only-child selectors like so:

tr:first-child:not(:only-child) th:first-child {
    color:red;
}

Code is relatively self explanatory, it will only affect the first child if it isn't an only child.

DEMO

It has relatively bad support though, you might need a javascript polyfill to make up for it if you need to support IE8 or below.