Not CSS Selector Example

In this article, we will see what are not CSS selector with an example.

What is :not() selector

It is also called as negation selector. The :not () selector is one of the pseudo-class selectors. If you use this selector, the style applies to everything except the element you place in the “not() selected braces”. You can use this selector if you want to style all elements except one

Syntax of a not pseudo-class selector

selector:not(argument)
{
declaration list;
}

It selects any HTML element targeted by the selector, if it does not match the argument passed to not pseudo class.

Ex:

p:not(.first)
{
background-color:blue;
}

It selects any p element if it has not class attribute value set to “first”.

Example

CSS:

p:not(.first){
background-color:blue;
}

HTML:

<p class="first">First Paragraph</p>
<p class="second">Second Paragraph</p>

Output

1. In the above code, we have created two paragraph tags with some text. Both tags have a class attribute, the first has a “first” value and the second <p> tag has a “second” value.
2. I want to apply a style to all p elements except classname “first”. So, in this situation, we should use the “not” operator as in the above code.
3. In CSS, we select the p element using the element selector. Then we put the ‘:’ semicolon and then we select the “not” pseudo-class selector with “first” classname.
4. Then style the “blue” background color within the parentheses.