Want to make the whole page in grayscale except specified div

css selector grayscale
AkiEru picture AkiEru · Sep 28, 2014 · Viewed 10k times · Source

I have a css code that could make the whole page in grayscale.

<style type="text/css">
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}
</style>

I now want to embed an iframe inside a div that would not be affected. I have searched about the solution and fount :not selector. When I refer to 6.6.7 at http://www.w3.org/TR/css3-selectors/#negation I think i have found the solution because it may work even I put html as my css selector

html|:not(x)

So I changed the code just like the above code but nothing changed. I was worried about the problem is caused by the design of my website so I decided to code them in jsfiddle in the most simple HTML

<div id="abc" class="abc"><font color="red">This should be a normal text.</font></div>
<font color="red">This should be an affected text.</font>

In CSS

html|*:not(.abc) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%); }

Link: http://jsfiddle.net/4vxyqdye/1/ PS: In the previous version I used :not(.abc) only but all elements become grayscale.

Answer

Damian Cardozo picture Damian Cardozo · Sep 29, 2014

Think in the weight of selectors, html is a general selector, less heavy than more specific selectors, like clases or IDs, if you do something like :

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

html .class-you-wanna-exlude {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
}

i think this will solve your issue.

Related questions

What does the & mean in an scss selector?

What does & refer to in an scss selector? //Case 1 .parent { & > ul { color: red } } //Case 2 .parent { & > ul { & > li { color: blue; } } } //Case 3 .parent { & > ul { & > li { color: blue; &:hover { color: pink } } } }

Read More
Is there a css selector to match a option value of the select tag?

For example: <select> <option value="one">1</option> <option value="two">2</option> <option value="three">3</option> </select> I want to select the option where value = …

Read More
Is there a way to select an open select box in css?

I set a background image (arrow down) to a select box after setting the webkit-appearance attribute to none. When the option list is opened I want to display another background image (arrow up). Is there a pseudo class or something …

Read More