Combining :not() selectors in CSS

Question

I'm trying to select all tr elements inside a table, except the third and fourth. I managed to do so by using:

#table tr:not(:nth-child(3)):not(:nth-child(4)) 

I'd like to combine those selectors because I've some more :nth-child entries. Something like this, but it didn't work:

#table tr:not(:nth-child(3), :nth-child(4)) 

This does work in jQuery, but not in CSS. I'm using Chrome (and I only need it to work there).

I've not been able to find a combining selector for this case. How can I combine selectors with :not?

Answer 1

Selectors level 3 does not allow anything more than a single simple selector within a :not() pseudo-class. As a jQuery selector, it works because jQuery extends its :not() functionality to allow any selector (like the .not() method).

However, your second syntax is one of the proposed enhancements to :not() in Selectors 4, and works equivalently to your first. Although the example (shown as of this writing anyway) shows a chain of :not() selectors, the proposal says:

The negation pseudo-class, :not(X), is a functional notation taking a selector list as an argument. It represents an element that is not represented by its argument.

Here a selector list is simply a comma-separated list of selectors.

If you need to negate selectors that contain combinators (>, +, ~, space, etc, for example div p), you can't use :not() in CSS; you'll have to go with the jQuery solution.

Answer 2

Although the marked answer is true I just want to point out that you can achieve what you want using css also but just in a different way. Instead of using not you can select those and unapply the stuff you don't want.

#table tr {     /* general case styling */     color: blue; } #table tr:nth-child(3), #table tr:nth-child(4) {     color: black; }