DEV Community

Cover image for CSS :not selector
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

10 1

CSS :not selector

The CSS :not selector is really cool we can call this a negation pseudo-class selector.

A mouth-full, but was it does it styles elements that do NOT match certain criteria.

The cool part is that I can be used on many types of elements.

  • Classes (.nav__item)
  • ID's (#my-element)
  • Types (div, li, etc)
  • Pseudo-classes (:last-child)
  • Attributes ([type="radio"])

Note: It doesn't style pseudo-elements so ::before won't work nor can't it style itself (:not(:not(...))).

HTML Structure

For this demo we will make a simple list which we will style accordingly.

<ul>
    <li class="new">Text rule 1</li>
    <li id="not_me">Text rule 2</li>
    <li>Text rule 3</li>
    <li>Text rule 4</li>
    <li>Text rule 5</li>
</ul>
Enter fullscreen mode Exit fullscreen mode

CSS :not selector

So let's say we want to style anything but the last-child.

li:not(:last-child) {
  color: purple;
}
Enter fullscreen mode Exit fullscreen mode

This will result in the following:

CSS :not last-child

Or maybe you want to style everything but one ID

li:not(#not_me) {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

CSS :not id selector

The same applies for a class:

li:not(.new) {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

CSS :not class

I hope this gives you a good overview of just how powerful the :not selector can be.
It might really save you having some weird css classes just to exclude one item from styling.

You can view this whole demo on the following Codepen.

Browser Support

The :not selector has really good browser support, just some issues on Android and Opera mini (where the later just doesn't support about anything).

CSS :not support

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Neon image

Build better on Postgres with AI-Assisted Development Practices

Compare top AI coding tools like Cursor and Windsurf with Neon's database integration. Generate synthetic data and manage databases with natural language.

Read more →

Top comments (5)

Collapse
 
maulik profile image
Maulik

Thank you Chris for writing this post. I didn't know about this.

Collapse
 
dailydevtips1 profile image
Chris Bongers

Ah, nice! Learned another cool CSS selector.
Most of the time I find you can work around it, but there are definitely cases you might need it.

Collapse
 
maulik profile image
Maulik

exactly

Collapse
 
rahxuls profile image
Rahul • Edited

i was literally writing a post on this topic

Collapse
 
bawa_geek profile image
Lakh Bawa

great, thanks

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

👋 Kindness is contagious

Value this insightful article and join the thriving DEV Community. Developers of every skill level are encouraged to contribute and expand our collective knowledge.

A simple “thank you” can uplift someone’s spirits. Leave your appreciation in the comments!

On DEV, exchanging expertise lightens our path and reinforces our bonds. Enjoyed the read? A quick note of thanks to the author means a lot.

Okay