Selector td not containing a table

Question

Tell me please, what am I doing wrong? I need to set the style for all td:hover that don't contain a table inside. I tried to make exceptions through the selector and many more different ways. It is desirable to show several solutions, very interesting

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);
}

HTML page:

<table>
  <thead>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--For these, the style should be applied-->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr style="display: none;">
      <td collspan="10"> <!--For it, style shouldn't be applied-->
          <table>
             <thead>
                 <th>...</th>
                 <th>...</th>
                 <th>..</th>
             </thead>
             <tbody>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
             </tbody>   
          </table>
      </td>
    </tr>
  </tbody>
</table>

Thanks!

@Xufox I corrected, although it doesn't affect the question. Html for a better view of the situation — Xambey, Nov 25 '17 at 11:05

score 2 · Accepted Answer · answered Nov 25 '17 at 12:26

As of the writing of this answer :has() CSS pseudo-class is considered an experimental technology¹; it is not supported by any browsers, not intended to be used within stylesheets, and should not be used in production.

Browser Support:

In the current specification :has is not marked as part of the dynamic selector profile, which means it can not be used within stylesheets; only with functions like document.querySelector()².

Source: :has - CSS | MDN

Alternative Solutions:

1) jQuery

jQuery('td > table').parent().addClass('nested-table');

jQuery('td > table').parent().addClass('nested-table');

/* Purely for the sake of demonstration */

td:not(.nested-table):hover {
    background: black;
    color: white;
}

td {
    height: 20px;
    width: 20px;
    transition: .7s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--For these, the style should be applied-->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td collspan="10"> <!--For it, style shouldn't be applied-->
          <table>
             <thead>
                 <th>...</th>
                 <th>...</th>
                 <th>..</th>
             </thead>
             <tbody>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
             </tbody>   
          </table>
      </td>
    </tr>
  </tbody>
</table>

2) Vanilla Javascript

var childNode = document.querySelector('td > table'),
    parentNode = childNode.parentNode;

parentNode.className = "nested-table";

var childNode = document.querySelector('td > table'),
    parentNode = childNode.parentNode;

parentNode.className = "nested-table";

/* Purely for the sake of demonstration */

td:not(.nested-table):hover {
    background: black;
    color: white;
}

td {
    height: 20px;
    width: 20px;
    transition: .7s;
}

<table>
  <thead>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!--For these, the style should be applied-->
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <tr>
      <td collspan="10"> <!--For it, style shouldn't be applied-->
          <table>
             <thead>
                 <th>...</th>
                 <th>...</th>
                 <th>..</th>
             </thead>
             <tbody>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
                <tr>
                    <!--For these, the style should be applied-->
                    <td>...</td>
                    <td>...</td>
                    <td>...</td>
                </tr>
             </tbody>   
          </table>
      </td>
    </tr>
  </tbody>
</table>

@Xambey I would've preferred to give you a CSS solution if it were possible with CSS alone. Unfortunately, it isn't - you'll need javascript to "find" table cells containing directly nested tables, then to go back again to that table cell and in some way indicate that it does or doesn't so that you can do what you need to. — UncaughtTypeError, Nov 25 '17 at 18:31
@Xambey No problem. Hopefully `:has` gets added to the dynamic selector profile at some stage, it would be very useful for situations like these. — UncaughtTypeError, Nov 25 '17 at 18:36

Selector td not containing a table

1 Answers1

Alternative Solutions: