CSS: negation selector (:not)

tag:not(expr)

Match tag if it does not match selector expr.

expr is any compound selector or complex selector or selector list.

tag here is compound selector, or none, which means the universal selector (* any tag).

/* match p, only if it is not class x nor class y */
p:not(.x, .y) {
 border: solid 1px red;
}

/* match any descendant of p, only if it is not class x nor class y */
p :not(.x, .y) {
 border: solid 1px blue;
}

The specificity of tag:not(expr) is expr.

Examples

/* any element inside body, but is not .y nor .y */
body :not(.x):not(.y) {
 border: solid 2px orange;
}

/* inside h2, and is not span.x */
h2 :not(span.x) {
 border: solid 2px green;
}

note, :not() is part of pseudo-class functions.