css: applicare l'articolo sulla prima <tr><th> se ci sono 2 <tr>

Question

è possibile applicare una regola alla prima <th> del primo <tr> se ci sono 2 o più <tr> in <thead>?

ho fatto:

table tr:first-child th:first-child 

ma se solo 1 <tr> c'è ti si applicano in ogni caso.

Answer 1

È possibile utilizzare una combinazione dei :not() e :only-child selettori in questo modo:

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

codice è relativamente auto esplicativo, interesserà solo il primo figlio, se non è figlio unico.

DEMO

E 'relativamente male support però, potrebbe essere necessario un javascript polyfill a fare per essa, se è necessario supportare IE8 o al di sotto.

Answer 2

Non penso che sia possibile senza utilizzare il css class. Se stai creando tr in modo dinamico. Suggerirei di fare come di seguito:

if(condition for rows > 2) { 
    <tr><th class="applyCSS"></th><th></th></tr> 
    <tr><th></th><th></th></tr> 
    ...... 
} 
else {  //only one tr 
    <tr><th></th><th></th></tr> 
} 

CSS:

applyCSS { .... }