The :not Selector in TailwindCSS – [ :not-first and :not-last ]

The :not selector in TailwindCSS is pretty much similar to the :nth selector. The :not selector is helpful in various use cases, for example, you have a list of elements and you don’t want to apply styles to all of them.

How to Use :not Selector in TailwindCSS

Same as other selectors, you can use arbitrary values to not select a specific element(s) from the list. In the following example, there are 3 different headings with a paragraph. Let’s say you don’t want to style the paragraph elements but only the heading elements. You can get the benefit of the :not selector in TailwindCSS. Here is the sample code.

In the above code, the font-bold and the mt-10 class will only be applied to headings because the :not selector is eliminating the paragraph elements. You can see the working example as well the output in the following screenshot.

Not Styling the First or Last Element with :not Selector in TailwindCSS

There are other use-cases of :not selector in TailwindCSS. For example, you are applying a border to a list of items and you don’t want to apply the border to the last element. Here is an example where you can stop the last element from being styled.

Here is the working code example and you can see the output in the screenshot below.

Same as the above example, you can do the same to not apply styles to the first element.

Conclusion

You can use the :not selector in TailwindCSS to not apply styles to specific types of elements. You can also use it with other selectors like first-child , last-child to achieve whatever you want. The :not selecor is quite similar to the :nth-child selector in TailwindCSS.