CSS - Apply filter to all except some classes & tags-CodePudding

I'm trying to make a simple dark mode chrome extension for a website, and what I'm trying to do is apply the filter invert(1) hue-rotate(180deg) to everything except images, video, and some other custom classes.

I tried to do the following, but it still inverts everything, including images, videos, and the custom class:

html:not(img):not(video):not(.custom-class) {
    filter: invert(1) hue-rotate(180deg)
}

As a workaround I tried to switch the colors around to normal on images, videos and other classes by applying the filter on them again, but the colors shift a little and it's not perfect, so I would like to specify which classes to not apply the filter to.

This is my current code:

.p-pageWrapper {
  filter: invert(1) hue-rotate(180deg);
}

.p-pageWrapper img,
.p-pageWrapper picture,
.p-pageWrapper video,
.fr-select-color,
.bbMediaWrapper,
.menu,
.menu img,
.tooltip-content,
.tooltip-content img {
  filter: invert(1) hue-rotate(180deg);
}

Any help is appreciated :) Thanks in advance!

CodePudding user response：

Your css is selecting the HTML element so long as it isn't an IMG or VIDEO element (which it can't be) or has the class custom-class.

You're most likely looking to apply the CSS for all elements, using the * selector. The issue you run into would then be that should your IMG or VIDEO element be contained within another DOM element, the parent element would be selected and the filter applied to it. To tackle this, you can use the :has selector.

Just remove .containter.darkmode from the CSS (as this is for demo purposes only)

function toggle(){
  document.querySelector(".containter").classList.toggle("darkmode");
}

.containter.darkmode *:not(img):not(:has(img)):not(video):not(:has(video)):not(.custom-class):not(:has(.custom-class)) {
    filter: invert(1) hue-rotate(180deg)
}

<button type="button" onclick="toggle()">Toggle Mode</button>
<div >  
    <p>Here is some text</p>
    <div>
      <span>Here is an image</span>
      <div>
          <img src="https://place-hold.it/300x500" />
      </div>
    </div>
</div>

CodePudding user response：

Your selection isn't right. You can get your desired style that way.

html {
   filter: invert(1) hue-rotate(180deg)
}

// Then revert the selected element style 

img, video, .customer-class {
   filter: invert(1) hue-rotate(180deg)  
}