First child TD of a table class

Question

I would like to apply some styling only to the first TD of a TABLE with a specific class. I am using:

.class td:first-child {
    background-color: red;
}

But If there are nested TD they get styled too.

How can I apply this only to the first TD?

See JSfiddle here (I would like test1 to get red, but not test4)

This might be helpful info regarding how css selectors work http://stackoverflow.com/questions/2636379/css-selectors-versus-space — mehring, Jan 25 '16 at 17:11

score 3 · Accepted Answer · answered Jan 25 '16 at 17:05

3

Unless you want to use classes or something, you could use the direct child selector:

.pretty > tbody > tr > td:first-child {
    background-color: red;
}

answered Jan 25 '16 at 17:05

dsgriffin

66,495
17
137
137

do you have an idea how to do this in SASS? – MeV Jan 25 '16 at 17:13
1

@MaRco85 http://jsfiddle.net/Sb2w4/42/, although it looks better in plain CSS in this case. – dsgriffin Jan 25 '16 at 17:19
Fantastic. It actually looks better in plain CSS :-D Thank you so much – MeV Jan 25 '16 at 17:23

score 2 · Answer 2 · edited Jan 25 '16 at 17:21

Child selector should work with the addition of the tr:first-child so your only selecting the first row also.

.pretty > tbody > tr:first-child > td:first-child {
    background-color: red;
}

<table id="logtable" class="pretty">
    <thead>
        <tr>
            <th>Time</th>
            <th>From</th>
            <th>To</th>
            <th>Payload</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test1</td>
            <td>test2</td>
            <td>test3</td>
            <td>
                <table>
                    <tr>
                        <td>test4</td>
                        <td>test5</td>
                    </tr>
                </table>
            </td>
         </tr>
         <tr>
             <td>test1</td>
             <td>test2</td>
             <td>test3</td>
             <td>
                 <table>
                     <tr>
                         <td>test4</td>
                         <td>test5</td>
                     </tr>
                 </table>
             </td>
         </tr>
         <tr>
             <td>test1</td>
             <td>test2</td>
             <td>test3</td>
             <td>
                 <table>
                     <tr>
                         <td>test4</td>
                         <td>test5</td>
                     </tr>
                 </table>
             </td>
         </tr>
     </tbody>
</table>

Ive added more table rows so you can see the result of using the `:first-child` pseudo selector on the row. — Aaron, Jan 25 '16 at 17:10
Unless you need to style each of those elements individually then I don't think you would need to do it any differently for SASS. — Aaron, Jan 25 '16 at 17:14

score 1 · Answer 3 · answered Jan 25 '16 at 17:05

1

You could use the child selector, >

.pretty > tbody > tr > td:first-child {
  background-color: red;
}

.pretty > tbody > tr > td:first-child {
  background-color: red;
}

<table id="logtable" class="pretty">
  <thead>
    <tr>
      <th>Time</th>
      <th>From</th>
      <th>To</th>
      <th>Payload</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>test1</td>
      <td>test2</td>
      <td>test3</td>
      <td>
        <table>
          <tr>
            <td>test4</td>
            <td>test5</td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>

answered Jan 25 '16 at 17:05

j08691

204,283
31
260
272

Thank you so much..! It's something new to me – MeV Jan 25 '16 at 17:08
do you have an idea how to do this in SASS? – MeV Jan 25 '16 at 17:12

John Slegers · Answer 4 · 2016-01-25T17:23:53.457

This should do the trick :

.pretty > * > tr > td:first-child {
    background-color: red;
}

<table id="logtable" class="pretty">
    <thead>
        <tr>
            <th>Time</th>
            <th>From</th>
            <th>To</th>
            <th>Payload</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test1</td>
            <td>test2</td>
            <td>test3</td>
            <td>
                <table>
                    <tr>
                        <td>test4</td>
                        <td>test5</td>
                    </tr>
                </table>
            </td>
         </tr>
         <tr>
             <td>test1</td>
             <td>test2</td>
             <td>test3</td>
             <td>
                 <table>
                     <tr>
                         <td>test4</td>
                         <td>test5</td>
                     </tr>
                 </table>
             </td>
         </tr>
         <tr>
             <td>test1</td>
             <td>test2</td>
             <td>test3</td>
             <td>
                 <table>
                     <tr>
                         <td>test4</td>
                         <td>test5</td>
                     </tr>
                 </table>
             </td>
         </tr>
     </tbody>
</table>

First child TD of a table class

4 Answers4