CSS Highlight Table Row But Not When Hovering First 3 Cells-CodePudding

I would like to highlight a row (change the background color) when i hover over any cell excluding the first 3 cells on the row (button cells). I also need to exclude the first row from the grid as that is the header row. (Images show desired behavior)

I have tried using many different :hover css selectors. But i cant seem to find the combination that allows me to highlight the row when hovering over any cell except the first 3.

table tr:hover td {
  background-color: #e6e600;
}

<table>
 <tr>
  <th></th>
  <th></th>
  <th></th>
  <th>Name</th>
  <th>Age</th>
  <th>Gender</th>
 </tr>
 <tr>
  <td><button></button></td>
  <td><button></button></td>
  <td><button></button></td>
  <th>Joe</th>
  <th>37</th>
  <th>Male</th>
 </tr>
</table>

Thanks!!

CodePudding user response：

It is not fully possible without JS as CSS has no parent selector. A few browsers (Safari and Chrome Desktop) already included the :has()-selector but as said, it is not fully supported yet.

The closest thing you an do without scripting is to highlight all th in a row. That said, you can use the tr:hover selector to check for a hover on the entire row. This means the hover will also trigger if you hover the first 3 elements. The background-highlighting therefore will only be used on the th. To exclude the first row you can use the :not()-selector:

table tr:not(:nth-child(1)):hover th {
  background-color: #e6e600;
}

<table>
 <tr>
  <th></th>
  <th></th>
  <th></th>
  <th>Name</th>
  <th>Age</th>
  <th>Gender</th>
 </tr>
 <tr>
  <td><button></button></td>
  <td><button></button></td>
  <td><button></button></td>
  <th>Joe</th>
  <th>37</th>
  <th>Male</th>
 </tr>
</table>

CodePudding user response：

The 4th, 5th, and 6th columns were all <th>, the cells that are in the <tbody> should be <td>, so that is corrected. Also, I added a <thead> to it as well and an extra <tr> to show that the highlight affects each <tr> separately. The following ruleset targets the <tr> to hover over and only the 4th, 5th, and 6th <td> are highlighted because of the :nth-of-type pseudo-classes.

tr:hover td:nth-of-type(4),
tr:hover td:nth-of-type(5),
tr:hover td:nth-of-type(6) {
  background: #fc0;
}

td {
  border: 1px solid #000;
  background: whitesmoke;
}

tr:hover td:nth-of-type(4),
tr:hover td:nth-of-type(5),
tr:hover td:nth-of-type(6) {
  background: #fc0;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button>A</button></td>
      <td><button>B</button></td>
      <td><button>C</button></td>
      <td>Joe</td>
      <td>37</td>
      <td>Male</td>
    </tr>
    <tr>
      <td><button>A</button></td>
      <td><button>B</button></td>
      <td><button>C</button></td>
      <td>Jill</td>
      <td>37</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>