Applying style to td that is contained in tr

Question

I have such issue, I have something like that:

    <tr>
      <td class="someclass">
        <input />
      </td>
    ...
      <td> </td>
      <td> </td>
     ..
    </tr>

I want to override "someclass" css class that will be applied only to first <td> with <input>. How can I do it? Maybe with parent specification or something like that? Note: I can't add new classes

This is a variation of the CSS parent selector question. See potential work arounds in: http://stackoverflow.com/questions/4792689/style-parent-li-on-child-lihover — Marc Audet, Dec 21 '15 at 11:56

Prajwal Shrestha · Answer 1 · 2015-12-21T12:09:42.720

0

Please try this:

table tr > td:first-child input{
   property: value;
}

edited Dec 21 '15 at 12:09

answered Dec 21 '15 at 11:53

Prajwal Shrestha

509
3
12

imGaurav · Answer 2 · 2015-12-21T12:06:32.397

0

You can use css pseudo class first-child

Supported from IE7 +

.someclass{background:red;}
#table1 tr > td:first-child {background:blue;}

<table id="table1">
<tr>
<td class="someclass">One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>

Please refer this link to know more about css selectors

edited Dec 21 '15 at 12:06

answered Dec 21 '15 at 11:54

imGaurav

985
6
11

Applying style to td that is contained in tr

2 Answers2