CSS Change background colour of an entire table row using :target selector

Question

I have a table with multiple rows and 2 columns. I would like for a whole table row to change background colour when #highlight:target is used. I have been able to make individual cells change colour with <td id="highlight"> but not on <tr id="highlight">

CSS:

#highlight:target {
  background-color: #FF9900;
  -webkit-transition: all 1s linear;
}

HTML:

<a href="#highlight">Highlight!!</a>
<table>
  <tr id="highlight">
    <td>First Column</td>
    <td>Second Column</td>
  </tr>
</table>

Can I change the background colour of an entire row using the :target selector?

Answer 1

You need to target the cell.

#highlight:target td {
  background-color: #FF9900;
  -webkit-transition: all 1s linear;
}

Answer 2

Add below css in your style tag.

#highlight td {
  background-color: #FF9900;
  -webkit-transition: all 1s linear;
}