0
206
ViewsReduce brightness on background without 1 child element
I need to reduce the background brightness when 1 DIV element is shown. However i manage to reduce the background using filter: brightness(0.5) but then the DIV element have reduced brightness as well
I've try it to use :not() operator but not successfully
This is how the css looks like:
#app {
width: 360px;
height: 600px;
display: flex;
flex-direction: column;
background: #ffffff;
overflow: hidden;
&:not(.getting-started-overlay) {
filter: brightness(0.5);
}
}
And this is how the DOM structure looks like:
How not to apply brightness on div with class getting-started-overlay
1 answers
Answer question0
Add a space to your rule:& :not(.getting-started-overlay) to target the children of #app instead of #app
EDIT You might be able to make use of the :empty pseudo class, which targets elements with no children, though in your case, your #app is the element that holds the properties you want changing.
Why not add a .empty class to the app and add append your populating function with a classlist.remove('empty')