html - Apply CSS Filter to all but specific sub-elements -

i need css filter apply elements in container, except specific ones. quick example explain situation:

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

then applying filters so:

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

so container has greyscale filter applied it, , img in turned grey. however, want 1 of img not turn grey:

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

however, not working. filter of container seems overriding filter of contained element. ideas how can around this? there easy way, or have write jquery @ elements aren't ".two" , apply filter them, rather container?

update: neglected mention important caveat: container has greyscale, due having background-image property turned grey. little snippet part of more containers going greyscale well, i'm trying figure out if there's way have overriding exemption rule on parent, since parent has have rule well.

use > specify image child of .container use not: specify don't want 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%);  }