CSS: :not negation selector

By Xah Lee. Date: . Last updated: .

Negation selector (:not)

tag:not(selectorList)

Match tag if it does not match selector selectorList.

selectorList is any selector list.

tag is optional. It can be a simple selector (selecting by tag name, id, class etc) or a compound selector (combination of tag name, id, class etc). If empty, it 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;
}

Specificity

The specificity of tag:not(selectorList) is the specificity of selectorList.

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.