CODEWITHSUNDEEP
htmlcss
MeV
MeV

Reputation: 3958

First child TD of a table class

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)

Upvotes: 2

Views: 6120

Answers (4)

John Slegers
John Slegers

Reputation: 47081

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>

See also this Fiddle.

Upvotes: 1

Aaron
Aaron

Reputation: 10430

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>

Upvotes: 2

j08691
j08691

Reputation: 207861

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>

Upvotes: 1

dsgriffin
dsgriffin

Reputation: 68566

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

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

Upvotes: 3

Related Questions