css not selector not working, not sure why - css

Question

I am trying to use the css not selector but not having much success. I am trying to apply attributes to images except for those in a .sponsors class.
img:not(.sponsors) {
width: initial;
max-width: 100%;
height: auto;
}
However it's applying the attributes to all images. The images in a sponsor class are in a table
<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
Any help would be appreciated

Answer 1

If you are using :
img:not(.sponsors) {
}
The "sponsors" class must be in an img tag.
In your example it should be :
<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img class="sponsors" src="image1.jpg" /></td>
<td style="width: 50%;"><img class="sponsors" src="image2.jpg" /></td>
</tr>
</tbody>
</table>
Simple test for that : https://jsfiddle.net/c31nq2dh/
Try to move the class property and observe the result

Answer 2

For simplicity I've changed the CSS rule to border: solid 5px red; just to see where it gets applied.
The CSS :not() selector works on elements which have the class. See only the element which does not have the class sponsors gets the red colored border
img:not(.sponsors) {
border: solid 5px red;
}
<table style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img class="sponsors" src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>
But your HTML has the class sponsors on the parent element. Add whatever rules you need to set or reset on the images like so:
.sponsors img {
border: solid 5px red;
}
<table class="sponsors" style="width: 100%; border-collapse: collapse; border-style: dotted;" border="0">
<tbody>
<tr>
<td style="width: 50%;"><img src="image1.jpg" /></td>
<td style="width: 50%;"><img src="image2.jpg" /></td>
</tr>
</tbody>
</table>