I need to apply not(.pseudo-element) filter using js but not sure how to add it so far i've manage to extract #app from the DOM using:
const app = document.getElementById('app')
app.style.filter = 'brightness(0.5)'
Now my goal is to apply this brightness to all childs with exception for one, how to achieve it using js
You could use shotgun02's answer or something like this:
const elements = [...app.querySelectorAll('*:not(.pseudo-element)')];
elements.forEach((element) => {
element.style.filter = 'brightness(0.5)';
});
In the example above I'm using spread syntax ([...app.querySelectorAll()]) because I personally prefer to work with Objects instead of NodeList but that's a personnal preference.
Another approach would be to use the .classList() method :
const elements = [...app.querySelectorAll('*')];
elements.forEach((element) => {
if (!element.classList.contains('pseudo-element')) {
element.style.filter = 'brightness(0.5)';
}
});
Keep in mind that the best approach is probably to do the same thing with CSS if you don't really need JS for that.
* {
filter: brightness(0.5);
}
.pseudo-element {
filter: none;
}
You can try the :not() selector as shown below which will return all child elements from app excluding elements having .pseudo-element class.
app.querySelectorAll('*:not([class="pseudo-element"])');
Another way to write the same is as belows:-
app.querySelectorAll('*:not(.pseudo-element)');
The :not(selector) selector also accepts commas
app.querySelectorAll('*:not(.pseudo-element,.pseudo-element-2)');