ADVERTISEMENT
ADVERTISEMENT

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:

Example 1: The :not() pseudo-class

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:

Example 2: The :not() pseudo-class

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 »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.