The :not() pseudo-class in CSS is used to select elements that do not match a specified selector. It provides a way to exclude certain elements from a set of selected elements, offering flexibility in styling and targeting specific elements within a document.
Syntax
/* Selecting all paragraphs that are not inside a div */
p:not(div p) {
/* styles */
}
/* Selecting all list items that are not the first child */
li:not(:first-child) {
/* styles */
}
Features
-
Exclusion: The
:not()pseudo-class is used to exclude elements that match the specified selector inside the parentheses. -
Multiple Selectors: You can use multiple selectors within the
:not()pseudo-class to exclude elements based on various criteria. - Enhances Specificity: It can be helpful in making more specific and targeted selections without resorting to overly complex or nested selectors.