CSS :not selector is not applying correctly

Question

I'm trying to apply styles to all elements except .reset-this and elements that are descendants of .reset-this. My CSS is not working. It's not applying to any elements.

*:not(.reset-this, .reset-this *) { //styles in here }

To see a live example of how it's not working, go to this Fiddle: http://jsfiddle.net/sh39L882/1/

Answer 1

In CSS 3, more specifically Selectors Level 3:

The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument.

The key here being simple selector. :not only access simple selectors like .classsName, not things with a ,, or .className .child.

Note however that this has been updated in Selectors Level 4:

The negation pseudo-class, :not(), is a functional pseudo-class taking a selector list as an argument.

Note the change of simple selector to selector list. That means that what you are trying to do will be possible, but only in browsers implementing the new spec.

You can always apply the styles broadly and then revert them:

* {
  color: red
}

.reset-this, .reset-this * {
  color: black;
}

But that is pretty terrible and gross and ugly. As you commented, it would be much better to design your class structures to avoid this.