Get parent of td (row) + hover effect

Question

I have td's which is colorized with background, but i want to get their row parent and set same colour. Also to have hover effect again on their parent row with different colour. So ... how to get parent row ?

And can i do all this with inline css ? JS is also allowed. Without jquery.

https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — pawel, Sep 21 '17 at 12:42
For the time being there is no way to select parent with child selector — Muhammad Muzamil, Sep 21 '17 at 12:45
Duplicate of many. Here is a good one: https://stackoverflow.com/questions/37959686/on-child-hover-change-the-css-of-parent — mplungjan, Sep 21 '17 at 12:48

score 1 · Accepted Answer · edited Sep 22 '17 at 05:21

You may try for this:

.hoverTable {
  width: 100%;
  border-collapse: collapse;
}

.hoverTable td {
  padding: 7px;
  border: #4e95f4 1px solid;
}


/* Define the default color for all the table rows */

.hoverTable tr {
  background: red;
}


/* Define the hover highlight color for the table row */

.hoverTable tr:hover {
  background-color: skyblue;
}

<table class="hoverTable">
  <tr>
    <td>Text 1A</td>
    <td>Text 1B</td>
    <td>Text 1C</td>
  </tr>
  <tr>
    <td>Text 2A</td>
    <td>Text 2B</td>
    <td>Text 2C</td>
  </tr>
  <tr>
    <td>Text 3A</td>
    <td>Text 3B</td>
    <td>Text 3C</td>
  </tr>
</table>

Get parent of td (row) + hover effect

1 Answers1