CODEWITHSUNDEEP
css
Roly
Roly

Reputation: 1536

CSS selection of first column of first row of a table (excluding nested tables)

I'm having difficulty with CSS selectors and I hope someone can perhaps help me out here.

I have some HTML that looks like so:

<table class=myTable>
   <tr>
      <td>this is the td of interest</td>
   </tr>
   <tr>
      <td>
         <table>
            <tr><td>I don't want this td!</td></tr>
         </table>
      </td>
   </tr>
</table>

I am trying to apply a background image to the FIRST td of the FIRST tr. So I tried the following:

table.myTable tr:first-child td:first-child {
    background-image: url(someUrl.gif);
}

But this is also finding the first td of the first tr of the nested table. I've tried different combinations with > and +, but no luck. Anyone have any ideas?

Note: I'm aiming for a solution that is compatible with IE7+.

Upvotes: 31

Views: 89752

Answers (8)

Arthur Savage
Arthur Savage

Reputation: 97

table.table td:nth-child(1) {text-align: center; font-weight: bold;}

Upvotes: 1

Chris
Chris

Reputation: 175

table.myTable  > tbody tr > td:first-child

For first column.

Upvotes: 4

Flavio Sousa
Flavio Sousa

Reputation: 455

This work for me:

table.myClass > tbody:first-of-type > tr > td:first-child

Upvotes: 4

Srinivasan.S
Srinivasan.S

Reputation: 3143

The following code may help you,

HTML Code:

<table id="myTableId" class="myTableClass">
    <tr>
        <th>S.No</th>
        <th>Name</th>
    </tr>
</table>

CSS Code:

Using table id:

table[id="myTableId"] > tr:first-child > th:first-child{
}

Using table class:

table[class="myTableClass"] > tr:first-child > th:first-child{
}

or

table.myTableClass > tr:first-child > th:first-child{
}

or

table.myTableClass tr:first-child > th:first-child{
}

Upvotes: 0

Pavel
Pavel

Reputation: 2776

table.myTable > tr:first-child > td:first-child

This code is difficult to support. Try the following instead:

<table class="myTable">
   <tr>
      <td class="verySpecialCell">this is the td of interest</td>
   </tr>
   <tr>
      <td>
         <table>
            <tr><td>I don't want this td!</td></tr>
         </table>
      </td>
   </tr>
</table>

or even

<table class=myTable>
   <tr>
      <td>
         <div class="verySpecialContent">
            this is the td of interest
         </div>
      </td>
   </tr>
   <tr>
      <td>
         <table>
            <tr><td>I don't want this td!</td></tr>
         </table>
      </td>
   </tr>
</table>

Upvotes: 1

ThatMatthew
ThatMatthew

Reputation: 1248

The selector you need is

table.myTable > tbody > tr:first-child > td:first-child

There is an implicit TBODY element in there, even though you don't have it in the code.

Upvotes: 83

Psyrus
Psyrus

Reputation: 1321

Not that speed is really a problem for the average website in this day and age, but, worth a note.

tags are slower to find than classes and classes are slower to find than id's.

So for simplicity and speed, how about just assigning an id to the element in question and applying a style to the id?

Upvotes: 4

George Kastrinis
George Kastrinis

Reputation: 5172

table.myTable > tr:first-child > td:first-child

The > means the tr that is a direct child of table

Upvotes: 5

Related Questions