How to create CSS rule for all elements except one class ?
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:
Please Login to comment...