How to use :not() in Tailwind CSS ?

Last Updated : 17 Sep, 2024

In Tailwind CSS, the :not() selector is used to exclude specific elements from a set of CSS rules. It allows you to apply styles to all elements except those that match the specified selector, providing greater control and precision in styling complex layouts.

CDN link:

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

Syntax:

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

Example 1: This example demonstrates the :not() selector in Tailwind CSS by applying styles to elements like h1, h2, and others, selectively excluding specific tags from certain styles for precise control.

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:

How to use Tailwind @apply in CSS Modules in Next.js ?

pushpamkjha14

Improve

Article Tags :

How to use :not() in Tailwind CSS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?