CODEWITHSUNDEEP
htmlcss
Keshav
Keshav

Reputation: 39

How can I select the last row of first table in the html code?

<!DOCTYPE html>
<html>
  <head>
    <style>
      table:first-child,
      tr:nth-last-child(1) {
        border: 1px solid black;
        color: #ffff00;
      }
    </style>
  </head>

  <body>
    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Wade</td>
      </tr>
      <tr>
        <td>Liam</td>
        <td>Mike</td>
      </tr>
    </table>

    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Wade</td>
      </tr>
      <tr>
        <td>Liam</td>
        <td>Mike</td>
      </tr>
    </table>

    <table>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>John</td>
        <td>Wade</td>
      </tr>
      <tr>
        <td>Liam</td>
        <td>Mike</td>
      </tr>
    </table>
  </body>
</html>

How can I select all the td elements in the last row of the first table on the webpage?

What happens is the whole table gets affected if I combine it with tr tag using the "," selector but if I code them separately then all the tables last rows get affected.

I just don't know how to combine table and tr correctly

Upvotes: 2

Views: 1632

Answers (3)

Vikas Piprade
Vikas Piprade

Reputation: 352

    /html/body/table[1]/tr[5]

This path represent your last row of first table.Similarly /html/body/table[2]/tr[5] represents last row of second table.

Upvotes: 0

Gosi
Gosi

Reputation: 2003

Use table:nth-child(1) for selecting only the first table itself. And then select the last row by tr:nth-last-child(1).

Try this:

table:nth-child(1) tr:nth-last-child(1) {
  color: red;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>

<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>John</td>
<td>Wade</td>
</tr>
<tr>
<td>Liam</td>
<td>Mike</td>
</tr>
</table>

Upvotes: 1

huan feng
huan feng

Reputation: 8623

Is this you wanted?

table:nth-child(1) tr:last-child td {
  background-color: green;   
}

Or:

table:first-child tr:last-child td {
  background-color: green;
}

Upvotes: 1

Related Questions