The :not() pseudo-class in CSS is a functional selector that allows you to exclude elements that match a certain selector from being selected. Essentially, it matches every element that does not conform to the specified selector inside the parentheses. This makes it particularly useful for applying styles broadly while selectively excluding specific elements without the need for additional classes or markup changes.

One of the main advantages of :not() is that it simplifies CSS rules and reduces redundancy. For example, instead of writing multiple selectors to target all elements except one, you can consolidate the logic into a single rule using :not(). This pseudo-class can accept any simple selector, including type selectors, class selectors, ID selectors, attribute selectors, and other pseudo-classes, although it cannot accept combinators or complex selector sequences prior to CSS Selectors Level 4. Level 4 selectors, however, do allow more complex sequences inside :not().

A common practical use case is when you want to style a group of elements but exclude a few. For example, if you want all <a> links inside a navigation bar to have a specific color, but you want to exclude the link with a class of active, you could use:

nav a:not(.active) {
  color: blue;
}

In this example, all <a> elements inside the nav element will be blue except those with the active class.

:not() can also be combined with other pseudo-classes and pseudo-elements to create powerful, targeted rules. For example:

button:not(:disabled) {
  cursor: pointer;
  background-color: #28a745;
}

button:not(:disabled):hover {
  background-color: #218838;
}

Here, all <button> elements that are not disabled will have a pointer cursor and a green background, with a slightly darker shade on hover.

It’s important to note that using :not() can improve readability and maintainability, but excessive use or nesting can impact performance, especially on pages with many elements. As a best practice, combine it thoughtfully with other selectors rather than chaining too many exclusions.

Another useful scenario is when you want to style all elements except certain types globally. For example:

*:not(p) {
  margin: 0;
  padding: 0;
}

This rule resets the margin and padding for all elements except paragraphs <a href="/html-tags/tag-p.php">p</a>.