What is the use of the :not() pseudo-Class in CSS ?

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.