HTML table how highlight row on hover except first column? - html

Question

Simple table:
<table id="myTable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>X</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>X</td>
</tr>
</table>
What I like:

Answer 1

Use :not and :first-child to exclude the first cell like so:
#myTable tr:hover td:not(:first-child){
background: #ddd;
}
Demo:
#myTable {
border-collapse: collapse;
}
#myTable td {
width: 100px;
border: 1px solid black;
}
#myTable tr:hover td:not(:first-child) {
background: #ddd;
}
<table id="myTable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>X</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>X</td>
</tr>
</table>

Answer 2

If I'm understanding the end goal, target :hover on a non :first-child element, then also select all of the elements that come after it using the general sibling selector.
td:not(:first-child):hover, td:not(:first-child):hover ~ td {
background: #eee;
}
<table id="myTable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>X</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>X</td>
</tr>
</table>

Answer 3

Use the :first-child Selector and a :not.
For example:
#myTable tr:hover td:not(:first-child) {
background: #999;
}
#myTable tr:hover td:not(:first-child) {
background: #999;
}
<table id="myTable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>X</td></tr>
<tr><td>3</td><td>4</td><td>X</td></tr>
</table>

Answer 4

You can use the :not with :firstchild like this:
$("#myTable tr").hover(
function () { $(this).find("td:not(:first-child)").addClass('hoverclass') },
function () { $(this).find("td:not(:first-child)").removeClass('hoverclass') }
);
#myTable tr:hover td:not(:first-child)
{
background-color: #444444;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table id="myTable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>X</td></tr>
<tr><td>3</td><td>4</td><td>X</td></tr>
</table>