-1

I have a table where a pair of tr elements make up a visual row

<table>
    <tr><td>Row1</td></tr>
    <tr><td>A</td></tr>
    <tr><td>Row2</td></tr>
    <tr><td>B</td></tr>
</table>

If the top row if each pair is hovered over, the pair of records can be highlighted:

/*1st, 3rd, etc and the following tr*/
table.highlightmessagerow tbody tr:nth-child(odd):hover,
table.highlightmessagerow tbody tr:nth-child(odd):hover + tr,
{
    background-color:#FFFFC0 !important;
}

I'm trying to highlight the pair of records when the bottom row of each pair is hovered. Is this even possible?

/*2nd, 4th, etc and the preceeding tr*/
table.highlightmessagerow tbody tr:nth-child(even):hover,
table.highlightmessagerow tbody tr + tr:nth-child(even):hover
{
    background-color:#FFFFC0 !important;
}
Jeremy
  • 44,950
  • 68
  • 206
  • 332
  • You can't actually target a previous sibling with CSS, but you can simulate the behavior with the flex `order` property: https://stackoverflow.com/a/36118012/3597276 – Michael Benjamin Jan 17 '18 at 00:21

1 Answers1

0

Not possible. There is no such thing as a previous sibling selector on CSS. You should consider just restructuring your HTML and use a much simpler tr:hover. 

tr:hover{background:red}
<table>
    <tr>
      <td>Row1 <br/>
      A
      </td>
    </tr>
    <tr>
      <td>Row2 <br/>
      B
      </td>
    </tr>
</table>
Facundo Corradini
  • 3,825
  • 9
  • 24
  • You are right, ideally I would restructure the html. In my case though I want that alignment between cells, which is difficult to achieve without a table and multiple rows. I did find an alternate post which suggests multiple tbody elements each grouping the rows, and it works great., https://stackoverflow.com/a/15296496/9266 – Jeremy Jan 17 '18 at 00:39