Unlawful CSS Selector

Wanting to utilize this particular CSS selector in conjunction with Selenium webdriver

#coordinatonTable .odd:not(:has(.dataTables_empty))

Encountering an "An invalid or illegal string was specified" error. I've attempted the jquery selector test from w3schools. Additionally, this service has flagged it as an "illegal selector". When I shorten the selector, it seems to work fine

#short .odd:not(:has(.dataTables_empty))
#coordinatonTable .odd:not(:has(.short))
#short .odd:not(:has(.short))

It appears that the selector may be too lengthy. However, this doesn't seem plausible. Any suggestions?

The structure of the html section resembles the following:

id="coordinatonTable"
  class="odd"
    class="dataTables_empty"
  class="odd"
    class="something"
  class="odd"
    class="somethingelse"
  ...

The objective is to retrieve all odd elements that do not contain an empty child element.

cssseleniumcss-selectors

Answer №1

:has is not a recognized CSS selector. This is actually a jQuery extension and should not be used in any CSS stylesheet.

I am unsure why the other instances you tried did not generate an error. In my experience, they always do.

Answer №2

:has is a unique jQuery selector that is not found in the CSS3 specification. If you are specifically looking to check for the absence of a class, then use the following code:

#coordinatonTable .odd:not(.dataTables_empty)

Answer №3

If you're searching for a highly sought-after (yet currently unavailable) parent selector, it's important to note that the :has selector in jQuery will not work in CSS. Unfortunately, there isn't a direct way to style an element based on its child elements using only CSS. One workaround could be adding an "empty" class along with existing classes if the backend allows it during element creation.

For instance:

id="coordinatonTable"
    class="odd empty"
        class="dataTables_empty"
    class="odd"
        class="something"
    class="odd"
        class="somethingelse"
    ...

If modifying the backend isn't possible, another option is to use JavaScript to loop through and add the empty class to the parent element after the DOM has loaded. In either case, assigning a class to the parent element is essential so you can apply styles like this:

.odd.empty {
    /* Special CSS for empty cell */
}

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

Despite parsing the page in detached mode, it is still being flagged as a bot

I'm currently attempting to navigate websites that utilize bot detection algorithms. I've implemented the following Chrome Options: chrome_options = Options() chrome_options.add_argument("start-maximized") chrome_options.add_experimenta ...

pythonseleniumselenium-webdriverselenium-chromedriverbots

The background hue does not cover the entire element

When I hover over my drop-down menu button, the grey color only covers up to where I set the padding. Here is my HTML snippet: Help ▾ Give Get Help Get Involved I want the grey color to expand fully across the "li" ...

cssdrop-down-menupaddingbackground-colordropdown

What is the process for individually loading each table column using Beautiful Soup?

Is it possible to load each column separately using Beautiful Soup? from selenium import webdriver from selenium.webdriver.common.by import By from bs4 import BeautifulSoup as bs url = "https://www.datasport.com/live/ranking/?racenr=21110&kat=96& ...

pythonseleniumbeautifulsoup

Guide to creating a responsive layout using CSS and HTML

I am looking to position the main contents (content 1 and content 2) in between two side menus on my exercise page. At the moment, the main contents are overlapping with the two menus. Can someone guide me on how to fix this alignment issue? Thank you. ...

htmlcsscss-float

The fixed position feature seems to be malfunctioning

I'm attempting to incorporate the persistent header feature demonstrated in this tutorial: http://css-tricks.com/persistent-headers/ Here's My Code: <div class="col-md-4 col-sm-4 col-xs-12 postRight persist-area"> <h2 class ...

jqueryhtmlcss

Tips for adjusting the appearance of a datagridview row when hovering over it:

How can I make the color change in a datagridview row when the user hovers over it? Currently, I am only able to get the gray rows to turn blue on hover, but I want this effect to apply to all rows except the footer as well. How can I achieve this without ...

cssasp.netdatagridview

What is the method for activating or deactivating pointer events for a particular section of an element?

Is it feasible to deactivate pointer events for only a portion of an element rather than the entire element? For instance, as shown in the image below.. https://i.sstatic.net/rnS7M.png Perhaps one could utilize another element to cover the specific area ...

htmlcss

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

javascriptcssreactjsnpm

Transforming an image into a CSS-powered website menu button: Step-by-step guide

I am currently using images as button backgrounds, and I have programmed them to change when the button is clicked to give the impression that it is being pressed. However, I am looking to enhance the responsiveness of the page, so that the images also cha ...

css

Leveraging the local variables within a function in conjunction with the setTimeout method

Currently, I'm facing an issue with a website that I'm working on. I have created a function that should add a specific class to different ids in order to make images fade out one by one on the home page. To streamline the process, I used a local ...

javascriptcssimagesettimeoutopacity

Achieving a pulsating SVG animation that functions properly in Internet Explorer

I have an animated SVG that pulses, and while it works in most browsers, it does not function properly in IE. Is there a way to make this animation work in IE without using an animated GIF as a workaround? Check out the code on CodePen <svg version=" ...

javascripthtmlcssinternet-explorersvg

What is the process for disabling the CSS module feature in Next.js?

In Next.js, Global CSS can only be imported in _App.js. However, importing global CSS in every component is not allowed, so we have to use CSS modules to comply with this restriction imposed by Next.js. Currently, I am in the process of migrating a large ...

javascriptcssreactjsnext.jsserver-side-rendering

Tips for shrinking a sticky header when scrolling using Angular and JavaScript

Looking for a way to modify the header component in an Angular application so that it shrinks as the user scrolls down while maintaining its sticky functionality. How can I adjust the display of the lower half of the header to show no text when the user s ...

javascripthtmlcssangularsticky-footer

Reorder elements using CSS when they do not share the same immediate parent container

I am looking to rearrange the order of some items on my page using JS or CSS. The project I am working on is written with ReactJS. Here is the basic structure: <div class="parent"> <form> <div class="header"></di ...

javascripthtmlcssreactjs

I desire to place a picture atop a carousel within a bootstrap framework

I'd like half of my display picture to overlap the carousel image at the top and be centered. The carousel should serve as a cover page similar to Facebook. .dp-container{ width: 200px; height: 200px; border: 2px solid black ...

htmlcssbootstrap-4

What is the best way to superimpose text on a variety of images with varying sizes using CSS

I have a client who is requesting a sold text to be displayed on top of all images that have been sold, positioned in the bottom left corner of each image. While I have successfully implemented this feature, the issue arises when dealing with images of var ...

htmlcssoverlayimage-size

Transforming the pen into a creative assortment of animated social media icons for top-notch production

My goal is to incorporate animated social media icons on my website using only CSS without any JavaScript. I came across a pen called "Yet Another Set of Animated Social Icons" that I'm attempting to modify. The issue at hand is that instead of the c ...

htmlcssbrowser

Error encountered in the main thread: Fail to click on element at current position

An error occurred in thread "main" org.openqa.selenium.WebDriverException: The element located at point (126, 7.98333740234375) is not clickable. Another element is intercepting the click: <div class="_1H5F__" data-reactid="10"></div> The com ...

javascriptselenium

Shifting the dropdown arrow to a different position within the navbar

In the R shiny application I am working on, I have a navbar with a dropdown arrow that I want to move inline instead of below the menu. https://i.sstatic.net/e6BZG.jpg Could this be related to the navbar toggle? https://i.sstatic.net/e7I87.jpg ...

cssrshinybootstrap-4

I'm currently trying to scrape websites that have JavaScript enabled, but I'm having trouble extracting any content from them

from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from selenium.webdriver.support.ui import ...

javascriptpythonseleniumweb-scraping