Skip to content
Related Articles
Open in App
Not now

Related Articles

How to use :not() in Tailwind CSS ?

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 11 Jul, 2022
Improve Article
Save Article

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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!