In this section, we will learn what the :not() selector is and how to use it in CSS.

CSS Selector :not() Pseudo Class

The :not( )pseudo class is another type of selector we use when we want to select a list of elements except those that are specified within the :not( ) pseudo class.

For example, let’s say we want to select those elements that have “class” attribute and the value is “animal” but in the result, we want to drop any element that is <div>! So using this :not() selector, we can define the `div` element to be dropped from the result list.

.animal:not(div)

Example: using :not() pseudo class in CSS

See the Pen using :not() pseudo class in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does :not() Pseudo Class Work in CSS?

In the example above, the target of the selector is the entire <li> elements in the page except for the one that has the id value `li1`. So the <li> element that has this value for its attribute will be dropped from the target elements.