Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • 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>


Output: 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!