32

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?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
pimvdb
  • 151,816
  • 78
  • 307
  • 352
  • 1
    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?](http://stackoverflow.com/questions/10711730/whats-the-difference-in-the-not-selector-between-jquery-and-css) – BoltClock May 23 '12 at 00:13

2 Answers2

35

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
7

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;
}
OZZIE
  • 6,609
  • 7
  • 55
  • 59