Suppose we have two classes that we give to an element depending on its state:
div.active {
color: red;
}
div.passive {
color: black;
}
In fact, the presence of two classes here
may be redundant. In this case, we can
rewrite the styles as follows via the
:not
selector:
div.active {
color: red;
}
div:not(active) {
color: black;
}
In this case, we can conveniently toggle our class, making the element active or inactive:
elem.classList.toggle('active');
Given paragraphs. Make each paragraph turn red on the first click on it, and turn black back on the second click.