CODEWITHSUNDEEP
htmlcssdomcss-selectors
Dane Iracleous
Dane Iracleous

Reputation: 1759

CSS :not selector is not applying correctly

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: 1158

Answers (3)

loganfsmyth
loganfsmyth

Reputation: 161647

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

Ross
Ross

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

user2481984
user2481984

Reputation:

Try this: 

*:not(.reset-this), .reset-this * {
    color:red;
}

http://jsfiddle.net/ymrsx8cx/

Upvotes: 0

Related Questions