How to select elements not having a certain class or attribute in CSS ?

Last Updated : 21 Mar, 2023

“Is it possible to choose elements that do not have a specific class or attribute? or “Is it possible for a CSS selector selecting elements not having a certain class or attribute”. It is a query that we are going to discuss, the answer to that particular problem statement is yes, and we will discuss how to achieve it. In this article, we will try to show how to select an element not having a certain class with the help of examples and illustrations.

CSS is a language for creating style sheets. Documents created in markup languages like HTML are formatted and visually represented using style sheet languages like CSS. For web developers, CSS selectors are an effective tool for styling HTML documents. They let web designers pick out particular web page elements and apply particular styling to them.

Now in this article, we are going to use :not() selector for letting the user choose the elements not having a particular class.

:not() Selector – Elements that are excluded from getting selected for applying styles represented by the :not() CSS pseudo-class. It is referred to as the negation pseudo-class since it stops users from selecting particular options.

Syntax:

:not(selector){
    // Property
}

Where the selector can be any valid CSS selector. By negating the class or attribute selector, the NOT selector can be used to choose components that do not have a specific class or attribute.

Now let us see the examples to understand the concept.

Approach:

An unordered list (ul) with five (li) list items is present in the HTML code.
The :not will allow coloring all the elements except the element having class ‘noclass’.
It highlights the text of these list items in red.

Example: In this example, we will try to color all the ‘li’ items to red except the first one.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
          
    <style> 
        ul li:not(.nocolor) { 
            color: red; 
        } 
    </style> 
</head> 
  
<body> 
    <ul> 
        <li class="nocolor">Row1</li> 
        <li class="color">Row2</li> 
        <li class="color">Row3</li> 
        <li class="color">Row4</li> 
        <li class="color">Row5</li> 
    </ul> 
</body> 
  
</html>

Output: Open the index.html file to see the output or we can use the live server to open the HTML file.

Approach:

A div element in the HTML body has three paragraphs, each of which has the “notHighlight” class present or not. The classes “notHighlight” are present in the first and third paragraphs but not in the second.
All paragraphs (p) that do not have the class “notHighlight” are selected by a CSS rule in the stylesheet that makes use of the :not selector. The content in these paragraphs that does not have the ‘notHighlight’ class is bolded according to the CSS rule.

Example: In this example, we are going to highlight the ‘p’ tag except having the class as ‘notHighlight’ using :not() selector.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <style> 
        p:not(.notHighlight) { 
            font-weight: bold; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <p class="notHighlight"> 
            This paragraph should not be highlighted. 
        </p> 
        <p> 
            This paragraph should be highlighted. 
        </p> 
        <p class="notHighlight"> 
            This paragraph should not be highlighted too. 
        </p> 
    </div> 
</body> 
  
</html>