Using :not() selector in Tailwind CSS (2022)

Last updated on June 14, 2022 Pennywise Loading... Post a comment

In CSS, you can use the :not() pseudo-class to style elements that do NOT match one or multiple specified elements/selectors. In Tailwind CSS 3.1 (released in June 2022) and newer, you can do the equivalent thing as follows:

[&:not(your selector)]:<utility class>

For more clarity about this, see example 1.

If you want to use the :not() selector from the parent element, you can do like so:

<div class="[&>:not(your selector)]:<utility class>">
    <!-- List of child elements here -->
</div>

See example 2 for a better understanding.

Example 1

Screenshot:

The code:

<body class="bg-sky-100 p-40">
    <h1 class="text-blue-500 text-4xl [&:not(h1)]:text-red-500 [&:not(h1)]:text-2xl">KindaCode.com</h1>
    <h2 class="text-blue-500 text-4xl [&:not(h1)]:text-red-500 [&:not(h1)]:text-2xl">Banana</h2>
    <h3 class="text-blue-500 text-4xl [&:not(h1)]:text-red-500 [&:not(h1)]:text-2xl">Apple</h3>
    <p class="text-blue-500 text-4xl [&:not(h1)]:text-red-500 [&:not(h1)]:text-2xl">Water Melon</p>
    <div class="text-blue-500 text-4xl [&:not(h1)]:text-red-500 [&:not(h1)]:text-2xl">Robot</div>
    <h1 class="text-blue-500 text-4xl [&:not(h1)]:text-red-500 [&:not(h1)]:text-2xl">Another H1</h1>
</body>

Example 2

This example uses the :not() selector in the parent element. Child elements other than <p> will have blue text and large font sizes.

Screenshot:

The code:

<body class="bg-amber-100 p-40">
    <div class="[&>:not(p)]:text-blue-500 [&>:not(p)]:text-4xl">
        <h1>KindaCode.com</h1>
        <p>Puppies are small and cute</p>
    </div>
</body>

That’s if. Further reading:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

You May Also Like