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?

I've expanded the jQuery aspect of your question into a more general and canonical post now, which you can find here: What's the difference in the :not() selector between jQuery and CSS? — BoltClock
– BoltClock, Commented May 23, 2012 at 0:13

BoltClock · Accepted Answer · 2012-09-06 14:04:13Z

36

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.

edited Sep 6, 2012 at 14:04

answered Sep 13, 2011 at 14:01

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

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

2 Comments

pimvdb Over a year ago

Thanks, the specifications indeed clearly state the differences between CSS3 and CSS4.

vhs Over a year ago

Your note about :not not supporting combinators was useful to me. Thanks.

OZZIE · Accepted Answer · 2020-08-19 06:42:50Z

8

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;
}

edited Aug 19, 2020 at 6:42

answered Mar 11, 2016 at 9:02

OZZIE

7,47410 gold badges64 silver badges66 bronze badges

Collectives™ on Stack Overflow

Combining :not() selectors in CSS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related