How to customize CSS (tr:Hover) in a thead table?

Question

I’m creating a project to exercise some things, and I made a table with fictitious data, where, when passing the mouse, the corresponding line changes color. I just didn’t want it to happen with the title line. What can I do? I tried everything but it didn’t work.

HTML:

<table id="esttt">
<thead>
<tr><td colspan="2">DADOS</td></tr>
<tr>
<td>ABC</td>
<td>22.7%</td>
</tr>
<tr>
<td>DEF</td>
<td>42.5%</td>
</tr>
<tr>
<td>GHI</td>
<td>12%</td>
</tr>
<tr>
<td>JKL</td>
<td>54.6%</td>
</tr>
</thead>
</table>

AND THE CSS:

#esttt{
    width:300px;
}

#esttt tr{
    line-height:30px;
}

#esttt tr:hover{
    background:#6B6BB6;
    color:#FFF;
}

#esttt thread{
    color:#FFF;
    font-weight:bold;
}

#esttt thread:hover{
    color:#FFF;
    font-weight:bold;
}

Answer 1

Roberto first see that you misspelled the element name in CSS... where it is thread should be thead

First of all I found the structure of your table a little strange... here you can consult the documentation of Mozilla https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

The expected would be something like this separating thead and tbody:

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
    </tr>
  </tbody>
</table>

---

Now on to the problem and to the :hover take all the tr less at first you can use the selector :not() for example and "remove" from the css rule only the first th (:first-child) then she was like this: #esttt tr:not(:first-child):hover

See how the result was with this model using the :not():

#esttt {
    width: 300px;
}

#esttt tr {
    line-height: 30px;
}

#esttt tr:not(:first-child):hover {
    background: #6B6BB6;
    color: #000;
}

#esttt thead {
    color: #000;
    font-weight: bold;
}

#esttt thead:hover {
    color: #000;
    font-weight: bold;
}

<table id="esttt">
    <thead>
        <tr>
            <td colspan="2">DADOS</td>
        </tr>
        <tr>
            <td>ABC</td>
            <td>22.7%</td>
        </tr>
        <tr>
            <td>DEF</td>
            <td>42.5%</td>
        </tr>
        <tr>
            <td>GHI</td>
            <td>12%</td>
        </tr>
        <tr>
            <td>JKL</td>
            <td>54.6%</td>
        </tr>
    </thead>
</table>