DEV Community

CSS :not Selector

Samantha Ming on February 04, 2019

Instead of using 2 different selectors to assign styling and then another to negate it. Use the :not selector to select every element except thos...
Read full post
Collapse
 
gmartigny profile image
Guillaume Martigny •

Nice post.

I just want to add one caveat of the :not selector:
It's quite expensive when working on low-performance environment. (let's be clear, I'm not talking about regular personal computer.)

CSS parse selector from right to left. So for this :

li:not(:first-of-type) {
}
Enter fullscreen mode Exit fullscreen mode

The parser will select all nodes being :first-of-type (potentially a lot). Then apply the inverse with the :not, and finally keeping only the li tag among them.

Given :not is never the only way to do something in CSS, if you really care for performance, avoid the :not selector. (in the end, it's very useful and I use it on personal projects)

Collapse
 
samanthaming profile image
Samantha Ming •

Very good point! Something to definitely keep in mind when choosing what kind of CSS selector to use. Thanks for sharing this insight 👍

Collapse
 
link2twenty profile image
Andrew Bone • • Edited

I often use not to prevent hidden from being overwritten.

.card:not([hidden]) {
  display: inline-flex
}

<div hidden class="card">
  Some card content
</div>

Without the not the HTML would display the content even though we want it to be hidden.

Collapse
 
samanthaming profile image
Samantha Ming •

WOOO! I like this example! Thanks for sharing 💯

Collapse
 
mkrl profile image
Mikhail Korolev •

Great writeup! I love the diversity of css selectors until the point when you actually need to use them in production. One of my past co-workers once said:

"If you need more than 2 level deep css selectors in production app, you are doing it wrong."

When both front and back-end parts are working together on a healthy project following simple rules like BEM methodology or something else of a similar nature, you should not have to use complex selectors. I'm not saying that this should be taken as a fundamental truth, but speaking from my humble experience, that saves nerves for all the gears of the development machine.

And of course yes, you absolutely need to know this stuff. Simply, just try not to be forced to use it on a regular basis :)

Collapse
 
samanthaming profile image
Samantha Ming •

I think you hit such an important point! When we implement something like BEM, complex selectors are really not needed. And that's probably better for performance as well. BEM is something I'm trying to utilize more of, not only does it avoid some crazy CSS selections but it's so much easier to follow the components. I just have to get use to the dashes and underscores 😝

Collapse
 
bitdweller profile image
Pedro Pimenta •

Nice technique on the :not(:first-of-type), it's much cleaner although can cause performance issues. I like it, though! Also, thanks for showing me :only-child, I had no idea!

Collapse
 
samanthaming profile image
Samantha Ming •

I wonder if it's because the performance, that's why IE didn't pick it up. Or maybe that's just IE being IE lol. :only-child is pretty neat, I'll have to play around with it some more and find some interesting examples, then that will be my next post 😀