2

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?

Improve this question
0

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Yes, you are right. The selectors are working nice.
This is explained in the duplicate question which I have linked above.
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 */
}
Improve this answer

4 Comments

@JustinJohn That must be nice. I envy you :)
This doesn't have anything to do with IE8 support.
It does in the sense that the :not selector wont work in anything <IE9
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?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.