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

Does css3's :not() only work on direct children?

Does css3's :not() only work on direct children?

Problem

I am trying to use css3's :not() selector to select certain elements that do not have a parent element with a certain class anywhere as its ancestor.

The mark up is simple:

Please select me!

Please don't select me!

Please don't select me!

And this is the selector I am using: div *:not(p) em.

And a fiddle: http://jsfiddle.net/cwxzH/

Why is the second div being selected if I am filtering out all children of the div that are paragraphs? Is there anyway to prevent this?

I have only tested in IE9 and FF13 so far.

Problem courtesy of: F21

Solution

div * selects all descendants of div ie strong p em then the :not(p) removes the p so you're left with strong and em, now with the em only the strong has an em descendant(the em) resulting in the em getting selected on the second div

Solution courtesy of: Musa

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

Does css3's :not() only work on direct children?

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×