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

Last Updated : 26 Apr, 2023

CSS provides a variety of selectors to target specific elements on a web page. One such selector is :not() which allows you to select all elements except those specified in the argument. The :not() pseudo-class is a powerful selector that can help you achieve more specific and targeted styling for your website.

The :not() pseudo-class is used to select all the elements on a web page except those specified in the argument. It is also known as the negation pseudo-class. It allows you to specify a simple selector or a group of selectors to exclude from the selection.

Syntax:

:not(selector) {
      // CSS styles
}

The selector is any valid CSS selector.

Approach 1: Using comma-separated selectors list: In this approach, you can provide a comma-separated list of selectors inside :not() pseudo-class to select all elements that do not match any of those selectors.

The following code snippet will select all p elements that do not have the class “class1” or “class2”

p:not(.class1, .class2) {
      // Styles
}

Example: This code example selects all <p> elements that do not have the classes “class1” or “class2” using the comma separator with the :not() pseudo-class. It sets their text color to red. Out of the five elements in the HTML, only the third and last elements have no “class1” or “class2” class, so they are affected by the CSS rule and their text color is changed to red.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
  
        /* Select all p elements that do not have  
        the class 'class1' or 'class2' Using  
        comma-separator */ 
        p:not(.class1, .class2) { 
            color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
    <p class="class1"> 
        This paragraph has the class 'class1'. 
    </p> 
    <p class="class2"> 
        This paragraph has the class 'class2'. 
    </p> 
    <p class="class3"> 
        This paragraph has the class 'class3'. 
    </p> 
    <p class="class1 class2"> 
        This paragraph has both classes  
        'class1' and 'class2'. 
    </p> 
    <p>This paragraph has no classes.</p> 
</body> 
  
</html>

Output:

Approach 2: Using multiple :not chaining: In this approach, you can chain multiple :not() pseudo-classes together to select elements that do not match all of the specified selectors.

For example, the following code will select all p elements that do not have both the class “class1” and the class “class2”:

p:not(.class1):not(.class2) {
      // Styles
}

Example: This below code example selects all <p> elements that do not have both the “class1” and “class2” classes using multiple :not() selectors chained together. It sets their text color to red.

Out of the 5 elements in the HTML, only the third and last elements do not have both “class1” and “class2” classes, so they are affected by the CSS rule and their text color is changed to red. The other elements are not selected by the CSS rule.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center; 
        } 
  
        /* Select all p elements that do not have  
           the class 'class1' or 'class2'  
           using multiple :not chaining */ 
        p:not(.class1):not(.class2) { 
            color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
      
    <p class="class1"> 
        This paragraph has the class 'class1'. 
    </p> 
    <p class="class2"> 
        This paragraph has the class 'class2'. 
    </p> 
    <p class="class3"> 
        This paragraph has the class 'class3'. 
    </p> 
    <p class="class1 class2"> 
        This paragraph has both classes  
        'class1' and 'class2'. 
    </p> 
    <p>This paragraph has no classes.</p> 
</body> 
  
</html>