Pseudo-class :not()
The :not()
CSS pseudo-class represents elements
that do not match a list of selectors. Since it
prevents specific items from being selected, it is
known as the negation pseudo-class.
p:not(.irrelevant) {
font-weight: bold;
}
p > :not(strong, b.important) {
color: darkmagenta;
}
/* <p> elements that don't have a class `.fancy` */
p:not(.fancy) {
color: green;
}
/* Elements that are not <div>s or `.fancy` */
body :not(div):not(.fancy) {
font-weight: bold;
}
/* Elements that are not <div>s or `.fancy` */
body :not(div, .fancy) {
text-decoration: overline underline;
}
/* Elements inside an <h2> that aren't a <span> with a class of `.foo` */
h2 :not(span.foo) {
color: red;
}