Can the :not() pseudo-class have multiple arguments?

Learn about the :not() pseudo-class with multiple arguments.
Submitted by Apurva Mathur, on May 24, 2022

Before jumping into the topic, let's just see what :not selector is, and how we use it.

The :not (selector): It works the same as it sound, this selector matches every element that is not the specified element.

Example:

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
         color: royalblue;
         }
         :not(h1) {
         color:deeppink;
         }
      </style>
   </head>
   <body>
      <h1>Heading</h1>
      <p>Paragraph</p>
      <div>This is some text in a div element.</div>
      <span>This some text in a span element</span>
   </body>
</html>

Output:

This explains best how :not selector works? In this example, only h1 heading tag will be colored royalblue else all the tags will be colored in deeppink.

Now lets us see via example, can it takes more than one parameter.

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:not(:first-child, .new) {
         color: red;
         }
      </style>
   </head>
   <body>
      <p>First-child of paragraph </p>
      <p>Paragraph 2 this will be in red</p>
      <p class ="new">This paragraph color won't change as this belongs to the class "new".</p>
      <p>This paragraph text color will be red.</p>
   </body>
</html>

Output:

In this example, the very first paragraph's text color and the ones that have the class name new won't show any change as the :not selector has been applied on that.

CSS Tutorial & Examples »

Hiding a scroll bar on an HTML page

Limit text length to n lines using CSS

Preparation

Aptitude Questions MCQs Find Output Programs

What's New

Top Interview Coding Problems/Challenges!

Comments and Discussions!