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?

Mickimickie

Works for me – Homesteader

@TinyGiant What web browser are you using? – Mickimickie

Chrome, this will work on all browsers unless you have a background set on the td element as the cell will be over top of the row. – Homesteader

I think the answer given by @tribe84 is the best for this situation as some of my tables do already have background styling. – Mickimickie

Whatever you want to do, just stating that your MCVE works as is, so this isn't a real question. – Homesteader

Syntax ERROR! <td>...</th> – Parrotfish

@Pangloss Woops ;) fixed lol – Mickimickie

Answer 1

You need to target the cell.

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

Jamnis

Answer 2

Add below css in your style tag.

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

Paleozoology

This is exactly the same as the accepted answer from 2015, except that it doesn't include the one thing OP asked for: using the :target selector. – Brazier