Open In App

How to use :not() in Tailwind CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Tailwind CSS is a framework that we use to style our website without explicitly writing CSS. 

To use Tailwind CSS, we just have to add the following library in the head section of our HTML file. The :not() selector in Tailwind CSS is a pseudo selector which is used to style an element that has some special styling.

CDN link:

<script src="https://cdn.tailwindcss.com"></script>

Syntax:

[&:not(selector)]:( CSS property)

Example 1: In this example, we have used different tags like h1, h2, h3, p, and div along with different styling properties for a better understanding of the :not() selector. We can clearly see how the :not() selector can be used for styling. In the h1 tag, we have used the :not(h2) for text color, so the red color is applied to it but for font size, we have used the :not(h1) by which 2xl size is not applied to it.

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=, initial-scale=1.0">
      
    <script src="https://cdn.tailwindcss.com"></script>    
</head>
  
<body class="p-4">
    <h1 class=
        "text-blue-500 text-4xl [&:not(h2)]:text-red-500 
        [&:not(h1)]:text-2xl">
        GeeksforGeeks
    </h1>
    <h2 class=
        "text-green-500 text-4xl [&:not(h2)]:text-red-500 
        [&:not(h1)]:text-2xl">
        GeeksforGeeks
    </h2>
    <h3 class=
        "text-blue-500 text-4xl [&:not(h1)]:text-red-500 
        [&:not(h3)]:text-2xl">
        GeeksforGeeks
    </h3>
    <p class=
       "text-blue-500 text-4xl [&:not(p)]:text-red-500 
        [&:not(h1)]:text-2xl">
       GeeksforGeeks
    </p>
  
    <div class=
        "text-blue-500 text-4xl [&:not(h1)]:text-red-500 
        [&:not(h1)]:text-2xl">
        GeeksforGeeks
    </div>
</body>
</html>


Output:

 

Example 2: In this example, we have used the :not() pseudo-selector to apply styling to child tags of the HTML div tag, we can see how the :not() selector is used for styling of h3 and h4 tags under div tag.

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=, initial-scale=1.0">
    <script src=
       "https://cdn.tailwindcss.com">
    </script>    
</head>
  
<body class="p-4">
    <div class="[&>:not(h4)]:text-green-500 
        [&>:not(h4)]:text-5xl [&>:not(h3)]:text-cyan-700 
        [&>:not(h3)]:text-3xl">
        <h3>GeeksforGeeks</h3>
        <h4>A Computer Science Portal For Geeks</h4>
    </div>
</body>
</html>


Output:

 



Last Updated : 11 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads