How to create CSS rule for all elements except one class ?

Last Updated : 29 Jun, 2022

In this article, we will learn how to create a CSS rule for all elements except one specific class.

Approach: Use the :not(selector), also known as negation pseudo-class which takes a simple selector as an argument and allows you to style all the elements except the element specified by the selector. We can never use nested negation :not(:not(selector)) because pseudo-elements are not simple selectors. So it is invalid.

Syntax:

:not(Selector){
    // CSS
    property: value;
}

Example 1: In the following code, we color all the p tag elements except one class specified by the selector. The output illustrates how all elements are styled except for one class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        p:not(.element4) { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>All styled elements except one class</h3> 
    <b> 
        <p>Element 1</p> 
        <p>Element 2</p> 
        <p>Element 3</p> 
        <p class="element4">Element 4</p> 
    </b> 
</body> 
  
</html>

Output:

Example 2: The following example shows another way to use :not(selector) in practice.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        li:not(.except) { 
            text-decoration: line-through; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3>All styled elements except one class</h3> 
    <b> 
        <p>Shopping List</p> 
        <ul> 
            <li class='except'>Coffee</li> 
            <li>Sugar</li> 
            <li>Milk</li> 
        </ul> 
    </b> 
</body> 
  
</html>