Having Issue On :not(.class) Selector and CSS3 Filter

Question

I am trying to apply Filter to Only Parent div and skipping this filter for Child div by using the CSS

:not(.class){}

selector as

.main:not(.nofilter) {
 -webkit-filter: blur(3px);
}

but as you can see in the demo the Filter is applying for child div .nofilter too! Can you please let me know how to fix this?

Thanks

Filter and properties like opacity on some element will affect the entire element include childrens. — DaniP, Oct 22 '14 at 21:26

score 3 · Accepted Answer · edited May 23 '17 at 12:05

3

nofilter is not applied to the parent itself, but to the child div element. Therefore .main:not(.nofilter) would match .main.

I am trying to apply Filter to Only Parent div and skipping this filter for Child div

I'm afraid that it is not possible. Same thing happens when you try to override the opacity of the parent for a child element.

Alternatively, if you want to apply blur filter only the background image, here is a workaround:

edited May 23 '17 at 12:05

Community

answered Oct 22 '14 at 21:29

Hashem Qolami

Note that the OP wants to skip the child elements from the blur effect wich is impossible – DaniP Oct 22 '14 at 21:31
actually, yeah what I want is skipping the child filter – user3649067 Oct 22 '14 at 21:33

score 0 · Answer 2 · answered Oct 22 '14 at 21:32

0

You will have to address the children directly and that apply :not() then

.main > div:not(.nofilter) {
 -webkit-filter: blur(3px);
}

answered Oct 22 '14 at 21:32

user2671355

Thanks but this is not working for both! if you remove the second image u will see there is no filter for the first one either – user3649067 Oct 22 '14 at 21:37
One issue is that there is only one source for the image. Also, the way you have the html structured overlays the images. So you're really only seeing the .nofilter div and not the main div under it. Get two different images and make to divs inside of a containing div so images aren't overlaying each other. here is a working example http://jsfiddle.net/k678hqt8/17/ – user2671355 Oct 22 '14 at 21:50
yeah but the problem is I cant' change the order of UI which I am getting in jQuery UI format – user3649067 Oct 22 '14 at 21:55
When you say you can't change the order of UI, you mean you can't change the HTML? – user2671355 Oct 22 '14 at 22:00

2 Answers2