Want to make the whole page in grayscale except specified div

css selector grayscale

10,930

Solution 1

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.

Solution 2

Apply the filter to all children of <body>, excluding the class specified, with:
body :not(.class-to-not-filter) { filter }

Have an example!

CSS

body :not(.exclude) {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

.exclude {
    background: yellow;
    height: 100px;
}

.gray {
    background: purple;
    height: 100px;
}

HTML

<div class="exclude"></div> 
<div class="gray"></div>

10,930

Author by

AkiEru

<?php while(true) { echo "Think before you execute! "; echo "Now just shut your computer down! "; } ?>

Updated on June 11, 2022

Comments

AkiEru almost 2 years
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.