CSS - Pseudo-class :not()

The CSS pseudo-class function :not() represents or matches the elements that do no match a given list of selectors. It is also known as negation pseudo-class, as it avoids the selection of specific items from a list.

The pseudo-class :not() is a very tricky pseudo-class and renders unexpected results. So you should be aware of it.

Few of the unexpected and unusual results of using :not() are as follows:

  • The :not() pseudo-class is used to write the useless selectors, like :use(*) shows that it will match any element, which is not an element. This doesn't make any sense, henc no rule will be applied.

  • It can increase the specificity of a rule; such as #foo.not(#bar), will match the same element as simple as #foo, with increased specificity of two selector ids.

  • The specificity of most specific selector, from the list of comma-separated selectors, replaces that of the :not() pseudo-class.

  • If you pass something like this :not(.foo), the pseudo-class will match everything, including the basic HTML tags such as <html> or <body>.

  • If you pass :not(table), it will result is matching of tr, tbody, th, td, caption, etc, as they can all match the given argument :not(table).

  • At a time multiple selectors can be negated, like :not(.foo, .bar), means :not(.foo) :not(.bar)

  • When any selector that is passed as a part of the list, proves to be invalid or unsupported, will result in invalidating the whole rule. To avoid this situation, you should use :is(), as it has the property of forgiving selector list.

Syntax

:not(<complex-selector-list>) {
   /* ... */
}

The pseudo-class :not() needs a comma-separated list of one or more selectors, to be passed as its argument. The list should not include another :not() or pseudo-element.

CSS :not Example

Here is an example of :not() pseudo-class.

In this example:

  • a class (.sample) is declared with some CSS styling.

  • :not() pseudo-class is used with .sample class on h1 element.

  • :not() pseudo-class is used with h1 as argument, and thus CSS styling applied to all the other elements, except h1 element.

<html>
<head>
<style>
   .sample {
      text-shadow: 2px 2px 3px yellow;
   }

   /* <h1> elements that are not in the class '.sample' */
   h1:not(.sample) {
      background-color: lightblue ;
   }

   /* Elements that are not <h1> elements */ 
   body :not(h1) {
      text-decoration-line: line-through;
   }

   /* Elements that are not <div> and not <span> elements */
   body :not(div):not(span) {
      font-weight: bold;
   }
</style>
</head>
<body>
   <h1>heading with :not(.sample) pseudo-class applied</h1>
   <h1 class="sample">heading with styling applied</p>
   <p>Paragraph, hence :not(h1) and :not(div):not(span) applied.</p>
   <div>div element, hence :not(h1) applied.</div>
</body>
</html>

Following is another example for :not(), where another pseudo-class :nth-child is used to select the alternate p element in the container, where styling is applied.

<html>
<head>
<style>
   p:not(:nth-child(2n+1)) {
      font-size: 3em;
   }
</style>
</head>
<body>
   <h1>Heading</h1>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
   <p>Paragraph 3</p>
   <p>Paragraph 4</p>
</body>
</html>

In the following example :not() is applied on <li> with class .sample. So the styling is applied on the <li> with no .sample class.

<html>
<head>
<style>
   li:not(.sample) {
      font-size: 2.5em;
      color: red;
   }
   .sample {
      color: green;
      font-weight: 800;
      background-color: lightyellow;
   }
</style>
</head>
<body>
   <h1>Unordered List</h1>
   <ul>
      <li>list item 1</li>
      <li class="sample">list item 2</li>
      <li>list item 3</li>
    </ul>
</body>
</html>
Advertisements