CODEWITHSUNDEEP
cssseleniumcss-selectors
user1482309
user1482309

Reputation: 309

Illegal CSS Selector

I want to use this CSS selector with Selenium webdriver

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

I get an "An invalid or illegal string was specified" error. I tried the jquery selector test from w3schools. Also this service show me "illegal selector". If I shorten the selector it works

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

Looks like the selector is to long. But this can not really be true. Any suggest?

The structure of the html part is like this:

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

I want get all odd element if they has no empty child.

Upvotes: 3

Views: 628

Answers (3)

Joe
Joe

Reputation: 2596

What you're looking for is a highly coveted (but not available) parent selector. Like others have mentioned, :has is jQuery only and will be rejected by CSS. There is currently no way to change the style of an element based on what children it contains using pure CSS. If you have access to the backend where the loop is executing and creating the elements, maybe check if there are any children first and add an "empty" class along with the "odd" class.

Example:

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

Or if that's not possible, you could loop through with javascript after the DOM loads and add the empty class to the parent element. Either way, you need to get a class on the parent element so you could do:

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

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 237865

:has is not a valid CSS selector. It is a jQuery extension and will be invalid in any CSS file.

I have no idea why your other examples didn't cause an error. They do for me.

Upvotes: 4

alexpls
alexpls

Reputation: 1964

:has is a jQuery selector - it's not part of the CSS3 spec. If you're just checking for the non-presence of a class, do:

#coordinatonTable .odd:not(.dataTables_empty)

Upvotes: 2

Related Questions