Can someone help me figure out what I'm doing wrong? I am trying to set a style for all td:hover elements that do not contain a table inside. I have tried various selectors and methods to create exceptions, but nothing seems to work. It would be really interesting to see different solutions.
This is my CSS style:
.table-md td:not(:has(>table)):hover{
background-color: #e0effd;
transition: 0.2s ease;
-moz-transition: 0.2s ease;
-webkit-transition: 0.2s ease;
transform: scale(1.02);
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
}
Here is the HTML page:
<table>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<!--The style should be applied to these cells-->
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr style="display: none;">
<td collspan="10"> <!--The style should NOT be applied to this cell-->
<table>
<thead>
<th>...</th>
<th>...</th>
<th>..</th>
</thead>
<tbody>
<tr>
<!--The style should be applied to these cells-->
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<!--The style should be applied to these cells-->
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Thank you in advance!