Clever Geek Handbook

CSS Change background color of whole table row using: target selector

I have a table with multiple rows and two columns. I would like the entire row table to change its background color when used #highlight:target

. I was able to change the color of individual cells with <td id="highlight">

, but not with<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>

Is it possible to change the background color of an entire row using a selector :target

?

+3


source to share


1 answer


You need to target the cell.



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


source






More articles:


All Articles