31

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
  • 665,005
  • 155
  • 1,345
  • 1,328
pimvdb
  • 146,912
  • 75
  • 297
  • 349
  • 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

34

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
  • 665,005
  • 155
  • 1,345
  • 1,328
6

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
  • 5,351
  • 5
  • 48
  • 56