Combining :not() selectors in CSS
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
?
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.
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;
}