Apply grayscale on div except one of it's child element

Question

What I want, is exclude part should be display in yellow color.

    body :not(.exclude) {
     -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
     filter: grayscale(100%);
    }
    
    .exclude {
     background: yellow;
     height: 100px;
    }
    
    .gray {
     background: purple;
     height: 300px;
    }

    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div class="gray">
        <div class="exclude"></div>    
      </div>
    </body>
    </html>

I tried but it is not displaying in yellow color

score 0 · Accepted Answer · answered Sep 08 '18 at 06:28

When a filter is applied it is not possible to ignore to the child elements. The alternate solution is.

.gray{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:purple;
  filter: grayscale(100%);
  z-index:-1;
}
.exclude{
  background-color:yellow;
  width:inherit;
  height:30px;
  top:10px;
  position:absolute;
  
}

<div id="parent_div" style="position:relative;height:100px;width:100px;">
  <div class="gray" ></div>
  <div class="exclude"></div>
</div>

Hope it works.

Apply grayscale on div except one of it's child element

1 Answers1