Why Does This Chained :not Selector Not Work?

I have a child div which has been effected by .img class. Although I insert :not selector for this div as .main .content .index-exp .img:not(#view-image):not(.view-image){ /*rest*/

Solution 1:

I think the issue is with the ID, when you give it a :not(#xxx) it gives the selector more specificity and when that happens it overrides the styles from the previous definition which is why you see the wrong styles. Once you remove it it works because the previously defined style is more specific.

You can see this in action using the inspector, it shows the styles being applied with and without the id (remove id part and rerun)

This is the definition you want

.viewers.product-exp.view-exp.content.inquiry-formdivspan.img

but when you add the ID, line 69 applies and overrides that.

Simplest thing to do is to add a class to the #view-image element and target the not to that class, something like

.main.content.index-exp.img:not(.new_class):not(.view-image){ /*rest*/ }