Necesito reducir el brillo de fondo cuando se muestra 1 elemento DIV. Sin embargo, logré reducir el fondo usando el filter: brightness(0.5) , pero luego el elemento DIV también redujo el brillo.
Intenté usar el operador :not() pero no con éxito
Así es como se ve el css:
#app { width: 360px; height: 600px; display: flex; flex-direction: column; background: #ffffff; overflow: hidden; &:not(.getting-started-overlay) { filter: brightness(0.5); } } Y así es como se ve la estructura DOM: 
Cómo no aplicar brillo en div con getting-started-overlay clase
Agregue un espacio a su regla: & :not(.getting-started-overlay) para apuntar a los elementos secundarios de #app en lugar de #app
EDITAR Es posible que pueda utilizar la pseudo clase :empty, que apunta a elementos sin hijos, aunque en su caso, su #app es el elemento que contiene las propiedades que desea cambiar.
¿Por qué no agregar una clase .empty a la aplicación y agregar su función de llenado con classlist.remove('empty')?