DEV Community

Ayoazeez26
Ayoazeez26

Posted on

The CSS :not() Selector

I stumbled upon this selector in CSS recently and I did a little reading on it and found its use cases very interesting so I decided to share it.

The :not() CSS selector has a wide range of use cases.

Use Cases

The general idea behind it's use case is to prevent certain items from being selected, hence it is known as the negation pseudo-class.

An example of a :not() Selector
Using this saves you time and more lines of code, as in this case you would have had to give the remaining p tags a specific class name and apply the style to that class.

Linking :not() with other pseudo selectors

This selector can also be used together with other pseudo-class and pseudo-element selectors. For example, the following will add a box shadow and a background color to all buttons that do not contain the plump class when they are being hovered on.

An example of a :not() Selector

Using :not() globally

You can also use the tag :not() selector globally in the sense that you are not applying it to an element so it selects all elements in the document except the ones specified in the brackets

An example of a :not() Selector

The CSS style above styles the color of every element in the document except the buttons.
Another example of the :not() Selector use case is this:

More Examples

An example of a :not() Selector

The above example will style all input text fields that are not disabled.
I hope you understand the basics and the general idea behind this awesome CSS Selector.

Resources for more insights

For further insights on the :not() Selector, I would recommend you check:
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
https://tympanus.net/codrops/css_reference/not/

Top comments (9)

Collapse
 
adam_cyclones profile image
Adam Crockett πŸŒ€ • Edited

My favorite misuse of not is:

*:not(*)

/* and */

ul:not(:not(li))

πŸ€¦β€β™‚οΈ

Just a quick note, this is not a tag, this is a pseudo-class. Tags are often misspoken in CSS and html I'm not sure why, anyway great article.

Collapse
 
tadhglewis profile image
Tadhg Lewis • Edited

Common one I've used when adding margin to bottom of list elements or right margin on a horizontal list but not the last element

example:not(:last-child)
Collapse
 
ayoazeez26 profile image
Ayoazeez26

This particular one is very useful, thanks for sharing

Collapse
 
notalex profile image
Alex

Thanks for sharing! Definitely gonna try this one out!

Collapse
 
ayoazeez26 profile image
Ayoazeez26

You're welcome, I hope you try it out!!

Collapse
 
calvinoea profile image
Calvin

This is a great article. Thank you for sharing your thoughts on this topic.

Collapse
 
ayoazeez26 profile image
Ayoazeez26

You're welcome, I'm glad you enjoyed it

Collapse
 
iktanim profile image
IBRAHIM KHALIL TANIM

Thanks for sharing this. I have never used the not selector before. Now I know the use-cases I will definitely use it.

Collapse
 
ayoazeez26 profile image
Ayoazeez26 • Edited

I hope you try it out soon