CSS - img:not selector?

Question

Any idea why the not selector below for the image is not working?

I want the not selector prevent the picture from having 20% width. I am trying to select the class test which my image is a part of.

<style>
img:not(.test){
    width:20%;
}
</style>
<html>
<div class="test"><img src="http://i.imgur.com/pMKpE40.jpg"></div>
</html>

score 2 · Accepted Answer · answered Jul 18 '17 at 21:24

2

The selector matches an img element so long as it is not a member of the test class.

You have an <img> and it has no class attribute at all.

The <div> is a member of test, the <img> is not.

:not(.test) > img would not match that <img>, but it might not cover all your use cases.

CSS has no way to say "Element has no ancestor which matches a selector".

answered Jul 18 '17 at 21:24

Quentin

Can you post an example code? – David Somekh Jul 18 '17 at 21:42
2

@DavidSomekh — I did! (Unless you mean an example of the thing I said was impossible, in which case: No, it is impossible). – Quentin Jul 18 '17 at 21:46
Thx quentin, your answer helped me understand the issue. – David Somekh Jul 19 '17 at 08:04

1 Answers1