:not() Pseudo Class in CSS with Examples

Back to: CSS Tutorials for Beginners and Professionals

: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.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.

:not() Pseudo Class in CSS