Reputation: 1759
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/
Upvotes: 4
Views: 1147
Reputation: 161447
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.
Upvotes: 7
Reputation: 141
Unfortunately you'll have to be more specific with your styles.
Firstly, the wildcard (*) selector cannot be used with pseudo classes because it is too broad - it essentially negates the :not
here. Instead, you can use body :not
.
Also, pseudo classes cannot be inherited. The best alternative is to have your descendants inherit its parent's style(s).
See the updated fiddle: http://jsfiddle.net/r4upf/sh39L882/2/
Upvotes: 2