Question

Markup:

<tr>
  <td colspan="3" rowspan="4">1</td>
  <td>2</td>
  <td>3</td>
</tr>

jQuery:

$("table tr td:first").addClass("first-col-cell");
$("table tr td:last-child").addClass("last-col-cell");

…according to jQuery documentation :first selector should only select the first td (1) but it also selects other 2.

Thanks

Answer 1

i just made a test page and the code that you posted works just fine. the table does, however, need to be at least 5 columns wide and 4 rows tall or i don’t believe the code will work correctly. the following example shows that the jquery code is working.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $("table tr td:first").addClass("first-col-cell");
    $("table tr td:last-child").addClass("last-col-cell");
});
</script>
<style>
    .first-col-cell {
        background-color: red;
    }

    .last-col-cell {
        background-color: blue;
    }
</style>
<table>
<tr>
  <td colspan="3" rowspan="4">1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
    <td>some</td>
    <td>content</td>
    <td>for</td>
    <td>teh</td>
    <td>test</td>
    <td>blahh</td>
</tr>
<tr>
    <td>some</td>
    <td>content</td>
    <td>for</td>
    <td>teh</td>
    <td>test</td>
    <td>blahh</td>
</tr>
<tr>
    <td>some</td>
    <td>content</td>
    <td>for</td>
    <td>teh</td>
    <td>test</td>
    <td>blahh</td>
</tr>
<tr>
    <td>some</td>
    <td>content</td>
    <td>for</td>
    <td>teh</td>
    <td>test</td>
    <td>blahh</td>
</tr>
<tr>
    <td>some</td>
    <td>content</td>
    <td>for</td>
    <td>teh</td>
    <td>test</td>
    <td>blahh</td>
</tr>
</table>