Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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?

Problem courtesy of: Justin John

Solution

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.

Solution courtesy of: Rodik

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×