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

Is it possible to apply the rule in the first of the <th>first <tr>, if in <thead>?

have 2 or more <tr>

I did:

table tr:first-child th:first-child 

but if in any case only 1 <tr>ti is applied .

+5
source share
2 answers

You can use a combination of :not()and :only-child:

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

The code is relatively clear, it affects only the first child, if he is not the only child.

Demo

It has relatively poor support , but you may need a javascript polyfill to compensate for this if you need to support IE8 or lower.

+7
source

I do not think this is possible without using css class. If you create tr dynamically. I would recommend doing the following:

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 { .... }
0
source

All Articles