:not() Pseudo Class in CSS

:not() Pseudo Class in CSS with Examples

In this article, I am going to discuss :not() Pseudo Class in CSS with Examples. Please read our previous article where we discussed !Important Property in CSS with Examples.

:not() Pseudo Class in CSS

We have seen in our previous articles about pseudo-classes and elements. Now, we are going to explore about “:not()” pseudo-class. It allows us to basically reverse a certain rule or exclude a certain selector.

For example
:not(p){
     color: red;
}

In the above example, it would apply a certain style to anything that’s not a paragraph. So, it will exclude the selector you pass between the parentheses.

For example, the below code is going to select all the paragraph tag which does not have an active class.
p:not(.active){
   color: red;
}

Example to understand :not() Pseudo Class in CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS Course</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <style>
 p:not(.active){
   		color: red;
 }
    </style>
</head>
<body>
     <p class="active">Paragraph with active class</p>
     <p>Paragraph without active class</p>
     <p class="active">Paragraph with active class</p>
     <p class="active">Paragraph with active class</p>
</body>
</html>
Output:

In the next article, I am going to discuss Positioning in CSS with Examples. Here, in this article, I try to explain :not() Pseudo Class in CSS with Examples. I hope this :not() Pseudo Class in CSS with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published.