How to use a “not equal” CSS attribute selector ?

Improve Article

Save Article

Like Article

 Cascading Style Sheets(CSS) fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document.

In this article, we will learn about how to use a “not equal” CSS attribute selector.

The :not(selector) selector is used to style every element that is not specified by the selector. Since it prevents specific items from being selected, it is also known as the negation pseudo-class. 

Syntax:

:not(selector)
{ CSS styles
}

Example: In this example, we have used the :not selector and paragraph element. In simple words, whatever is present in not selector, except that element, everything will change its style.

HTML

<!DOCTYPE html>

<html>

  

<head>

    <title>    CSS | :not selector    </title>

    <style>

        p 

        {

          color: black;

        }

          

        :not(p) 

        {

          color: green;

        }

    </style>

</head>

  

<body style="text-align:center;">

  

    <h1>GeeksforGeeks</h1>

  

      

<p>    A computer science portal for geeks.</p>

  

  

    <div>

        We provide a variety of services for you to learn,

        thrive and also have fun! Free Tutorials,

        Millions of Articles, Live, Online and Classroom Courses ,

        Frequent Coding Competitions ,Webinars by Industry Experts,

        Internship opportunities and Job Opportunities. 

        Knowledge is power!

    </div>

</body>

</html>

Output:

How to use a “not equal” CSS attribute selector ?

:not() selector

By Julio MarchiPosted on