Criteria for selecting table data that does not include another table

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!

Answer №1

At the time of composing this response, the CSS pseudo-class :has() is categorized as an experimental technology, meaning it is not currently supported by any browsers, not recommended for use in stylesheets, and should be avoided in production environments.

Browser Support:

  1. Check the MDN Browser compatibility table
  2. Visit Caniuse.com

According to the current specification, :has is not designated as part of the dynamic selector profile, indicating it cannot be utilized within stylesheets; it can only be used with functions like document.querySelector().

Source: Refer to :has - CSS | MDN

Other Possible Solutions:

1) Utilizing jQuery

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

Vanilla Javascript Approach:

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

parentNode.className = "nested-table";

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The selection feature is not supported for the type of input element in jQuery

I'm currently attempting to utilize AJAX to send a form with jQuery. However, upon clicking the submit button (which is technically a link), I encountered an error. The error displayed in the console is as follows: Failed to read the 'selection ...

Google's Inspector reveals varying widths on display

Currently, I am working on a web page and have noticed some discrepancies in the window widths when viewing the page using Google Inspector. The issue seems to occur when comparing the page hosted on Github pages with the one hosted on a local server. You ...

What is the reason that $ isn't recognized in jQuery version 1.4.2?

Here is the code snippet I've been working on: $("span.cls").on("click", function(){ $("#dialog").html(""); }); span{ border: 1px solid; cursor: pointer; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">& ...

Tips for smoothly animating without overlapping to the far right position

Here is the code I have: body { font-size: initial; line-height: initial; } @-webkit-keyframes slide { from { margin-left: 0%; } to { margin-left: 30%; } } @-webkit-keyframes turn { 0% { -webkit-transform: rotate(30deg); } ...

What is the best way to slide a Bootstrap 4 modal dialog to the right when closing, utilizing CSS or JavaScript

I have successfully added a CSS animation to my Bootstrap modal that slides in from the right when opening, which looks great. However, I am looking for a way to slide it back to the right when a custom close button is clicked, instead of just hiding it wi ...

Adding classes to forms in Laravel 4 is a simple yet important step in custom

It may be a straightforward solution, but I haven't been able to locate any documentation on this topic. Recently, I created a form using Laravel 4 which is functioning as expected. However, the next step is to add some styling. How can I incorporate ...

Using two divs, each containing different content, with one incorporating a tinymce editor, in order

There are two div elements in my code: <div id="ing" style="position:relative;"> <div id="comm" style="position: absolute; width: 27% !important; height: 141px; right: 18px; top: 1px; "> </div> </div> After that, I set T ...

The performance of Jquery Animate is acting strangely after the upgrade to version 1.11

Take a look at http://jsfiddle.net/integerz/k19x8L1b/2/ which uses version 1.7.x $(function () { $("#clickme").toggle(function () { $(this).parent().animate({right:'0px'}); }, function () { $(this).parent().animate({righ ...

Assigning a class to every alternate item

Currently, I am in the process of compiling a list of products. To enhance the layout, I would like to assign a specific class to every other element. This class could be :before, :after, or simply .My-clas <div class="product-single"></div> ...

What sets siblings apart from children?

Trying to decipher the code snippet referenced in this post has got me puzzled. Why is it that Children are used instead of Siblings in this case? I can grasp the concept of Children referring to nested tags, but what exactly does Siblings signify? $(&apo ...

Delaying Bootstrap 3 Carousel Captions

Website: Issue: I am attempting to integrate the javascript slide.bs.carousel into my code in such a way that the caption appears a few seconds after the image loads in the slideshow. I have inserted the code for 'slide.bs.carousel' within a scr ...

Create a background for a dropdown list that appears unreachable, positioned above all other elements

I am encountering an issue with my autocomplete function where the drop down list appears unreadable as it is overlapping other elements on the page. The problem lies in the fact that I did not manually create the drop down list, but rather it is generate ...

Create a typing effect in Javascript that mimics the user's input

Trying to simulate a typing effect with the sentence extracted from user input using JavaScript, but encountering some issues. Successfully capturing and displaying the input in the console with console.log(), however, incorporating the typing effect func ...

Tips on incorporating Vue.js for creating a reusable modal template?

Currently, I've developed a web app that loads a dynamic dashboard using data from a SQL database. The dashboard elements have buttons that are supposed to trigger modals displaying problem information for user interaction. Lately, I've integrat ...

Display the content within the preformatted tag

As a Python and Selenium novice, I am eager to extract the text within the pre tag of the provided snippet using Python Selenium. <body><pre style="word-wrap: break-word; white-space: pre-wrap;"> " Here is some sample text that I need to re ...

The quickest method to modify the anchor element's class depending on the query string

Requirement - I aim to accomplish this task using only pure JavaScript without any additional libraries, although I am open to using one if necessary. I need to assign an extra class to anchor elements that contain a query string of 'xyz=negate' ...

I'm having trouble getting the footer to stay at the bottom of the window instead of the page. Any tips on

I've exhausted all resources searching for a solution to my issue, but nothing seems to quite fit. The floats on my page are extending beyond the boundaries, and when I load in the footer, it stubbornly sits at the bottom of the initial viewport befor ...

The list style image is failing to display properly due to an issue with the external

Below is the HTML code that I have written: <!DOCTYPE html> <html> <head> <style> ul{ list-style-image:url('img/grey.png'); } </style> <body> <ul> <li>Coffee</li> <li>Tea</li&g ...

Deactivating one div's class upon clicking on another div

Below is the HTML code snippet: <div class="container"> <ul class="navbar"> <li class="nb-link"><a>Home</a></li> <li class="dropdown"> <a>CBSE</a> <ul class="dropdown-menu"&g ...

Leveraging AJAX for managing multiple selection options without the need for a submit button

Currently, I have a page featuring two select buttons. Whenever both are selected, the page should update automatically. Furthermore, each time a new option is chosen, the page needs to keep updating on its own. Below is my HTML code: <form action="" m ...