CSS with :not selector working when placed inside as jquery selector, not with pure CSS

Question

Possible Duplicate:
What’s the difference in the :not() selector between jQuery and CSS?

How to write CSS selector for a class 'ui-content'. But it should not be child of a id 'ui-container'?

I tried with following selector in CSS.

.ui-content:not(#ui-container > .ui-content) {
    //styles goes here
}

But it does work in jquery like $('.ui-content:not(#ui-container > .ui-content)'), but not in pure CSS.

How to correct this CSS selector?

Does all selectors working with jquery doesn't work with pure CSS selectors?

score 2 · Accepted Answer · answered Nov 06 '12 at 13:29

2

This is simple:

:not(#ui-container) > .ui-content{
   // style
 }

You just need to make sure that there are no other classes that can comply to not being #ui-container and still be .ui-content's direct parent.

answered Nov 06 '12 at 13:29

Rodik

4,054
26
49

Yes, you are right. The selectors are working nice. – Justin John Nov 06 '12 at 13:51
This is explained in the duplicate question which I have linked above. – BoltClock Nov 06 '12 at 15:24

score 0 · Answer 2 · answered Nov 06 '12 at 13:29

0

You cannot use logic like this in CSS if you want to support IE8 or lower as you are essentially going up the DOM to look at a parent element which CSS cannot do.

The alternative is to apply a global style to all .ui-content elements, and then use a more specific selector to override that style for elements inside the container, eg #ui-container .ui-content. Try this:

.ui-content {
    color: #C00;    /* Dark red */
}

#ui-container .ui-content {
    color: #CCC;    /* Grey */
}

answered Nov 06 '12 at 13:29

Rory McCrossan

331,213
40
305
339

@JustinJohn That must be nice. I envy you :) – Rory McCrossan Nov 06 '12 at 13:37
This doesn't have anything to do with IE8 support. – BoltClock Nov 06 '12 at 15:24
It does in the sense that the `:not` selector wont work in anything – Rory McCrossan Nov 06 '12 at 17:08
My point is that your first sentence doesn't make any sense. If CSS as a language doesn't support something in the first place, how is IE8 support relevant? – BoltClock Nov 06 '12 at 17:43

CSS with :not selector working when placed inside as jquery selector, not with pure CSS

2 Answers2