Apply CSS filter to all but specific subelements

Question

I need a CSS filter to apply to all elements in the container, except for specific ones. A 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 apply the filters like this:

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

Thus, a shade filter is applied in the container, and all img in it become gray. However, I want one of img not to turn gray:

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

However, this does not work. The container filter appears to overlap the filter of the contained element. Any ideas how I can get around this? Is there an easy way, or do I need to write some jQuery to look at all the elements that are not ".two" and apply a filter to them, and not to the container?

: : , - background-image, . , . , , .

Answer 1

use > , , .container, : , ,

.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>

Hide result

jsfiddle

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

Answer 2

CSS -

.two .container css,

.two , .. img.two

UPDATE

.container div, . , , . .container img, .

Answer 3

Use :notto exclude.two

The negative CSS pseudo-class :: not (X) is a functional notation that uses a simple X selector as an argument. It corresponds to an element that is not represented by an argument. X should not contain another negation selector.

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