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