Apply CSS Filter to all but specific sub-elements

Question

I need a CSS filter to apply to all elements in a container, except for specific ones. Quick example to explain the situation:

<div class="container">
 <img class="one" src="blah" />
 <img class="two" src="blah" />
 <img class="three" src="blah" />
</div>

Then I am applying filters as so:

.container {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

So the container has the greyscale filter applied to it, and all img in it are turned to grey. However, I want one of the img to not turn to grey:

.two {
 -webkit-filter: grayscale(0);
 filter: grayscale(0);
}

However, this is not working. The filter of the container seems to be overriding the filter of the contained element. Any ideas how I can get around this? Is there an easy way, or do I have to write up some jQuery to look at all the elements that aren't ".two" and apply the filter to them, rather than the container?

Update: I neglected to mention an important caveat: The container has to be greyscale, due to it having a background-image property that is to also be turned grey. This little snippet is part of more containers that are all going greyscale as well, I'm really just trying to figure out if there's a way to have an overriding exemption to the rule on the parent, since the parent has to have the rule as well.

Answer 1

According to CSS specifity rules -

Either put the .two after the .container in the css,

Or make the .two more specific, i.e. img.two

UPDATE

The .container rule is on the div itself - not on the images. So the container goes grayscale regardless of what you tell the images to do. Try changing that into .container img, and then try incorporating the answers you received.

Answer 2

use > to specify an image that is a child of .container the use not: to specify that you don't want the second image grey

.container > img:not(.two) {
     -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

<div class="container">
 <img class="one" src="http://lorempixel.com/400/200" />
 <img class="two" src="http://lorempixel.com/400/200" />
 <img class="three" src="http://lorempixel.com/400/200" />
</div>

jsfiddle

.container > img:not(.two) {
 -webkit-filter: grayscale(100%);
filter: grayscale(100%);
 }