CSS follow table class but skip tr id

Question

I have this:

table.eshop {
    border-collapse: collapse;
}
table.eshop tr {
    border: 1.5px solid #d8d8d8;
    border-style: none none solid solid;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
}
table.eshop:not(#eshop_header) tr:hover {
    border-left: 7px solid #61ce70;
}
table.eshop td {
    height: 55px;
    padding: 0px 20px;
}
table.eshop a {
    font-family: Verdana;
    color: black;
    text-decoration: none;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}
table.eshop a:hover {
    color: #f77326;
}
#eshop_header {
    font-size: 23px;
    color: black;
    font-weight: bold;
}

and in html:

<center>
<table width=100% class=eshop>
<tr><td align=left valign=middle width=100% id=eshop_header>CATEGORY</td></tr>
<tr><td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something1>something1</a></td></tr>
<tr><td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something2>something3</a></td></tr>
<tr><td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something3>something3</a></td></tr>
</table>
</center>

and basicaly I need CSS (the tr:hover) not to follow the <tr> where id=eshop_header.
As you can see, I have tried not(#eshop_header) but it doesnt work :(

Answer 1

table.eshop:not(#eshop_header) tr:hover {
    border-left: 7px solid #61ce70;
}

mean "table.eshop" and not have id "eshop_header" => tr:hover , so it's doesnt work.

when u hover tr , tr will change.

so hover flow element is table.eshop => tr.

write #eshop_header on tr, then tr:not(#eshop_header) could work.

or

make hover flow element become table.eshop => tr => td.

then write "eshop_header" on td.

* { font-family: Verdana; color: #7a7a7a; line-height: 1.5em; font-size: 15px; } 
table.eshop {
      border-collapse: collapse;
    }

    table.eshop tr {
      border: 1.5px solid #d8d8d8;
      border-style: none none solid solid;
      -webkit-transition: 500ms;
      -moz-transition: 500ms;
      -o-transition: 500ms;
      transition: 500ms;
    }

    table.eshop tr:not(#eshop_header):hover {
      border-left: 7px solid #61ce70;
    }

    table.eshop td {
      height: 55px;
      padding: 0px 20px;
    }

    table.eshop a {
      font-family: Verdana;
      color: black;
      text-decoration: none;
      -webkit-transition: 300ms;
      -moz-transition: 300ms;
      -o-transition: 300ms;
      transition: 300ms;
    }

    table.eshop a:hover {
      color: #f77326;
    }

    #eshop_header td{
      font-size: 23px;
      color: black;
      font-weight: bold;
    }

<center>
    <table width=100% class=eshop>
      <tr id="eshop_header">
        <td align=left valign=middle width=100%>CATEGORY</td>
      </tr>
      <tr>
        <td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something1>something1</a></td>
      </tr>
      <tr>
        <td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something2>something3</a></td>
      </tr>
      <tr>
        <td align=left valign=middle width=100%><a href=index.php?page=eshop&category=something3>something3</a></td>
      </tr>
    </table>
  </center>

#eshop_header td{
  font-size: 23px;
  color: black;
  font-weight: bold;
}