Illegal CSS Selector

Question

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.

lonesomeday · Accepted Answer · 2013-06-07 13:34:07Z

4

: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.

answered Jun 7, 2013 at 13:34

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1482309 Over a year ago

Ok thanks. I mixed two different things. That is right. But how can I selector the odd elements without has? I updated the question for this.

lonesomeday Over a year ago

@user1482309 There is no "parent selector" in CSS. The easiest solution would be to add a class to the ancestor element. You could do this server-side or with client-side code, such as jQuery.

alexpls · Accepted Answer · 2013-06-07 13:33:44Z

2

: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)

answered Jun 7, 2013 at 13:33

alexpls

1,97420 silver badges29 bronze badges

Comments

Joe · Accepted Answer · 2013-06-07 13:53:53Z

1

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 */
}

answered Jun 7, 2013 at 13:53

Joe

2,5962 gold badges16 silver badges12 bronze badges

1 Comment

Joe Over a year ago

@user1482309 yes, true, but that takes away compatibility for IE8 and lower. It all depends on the use case, I guess.

Collectives™ on Stack Overflow

Illegal CSS Selector

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related