Germán Freixinós

I can never remember whether `:not(.foo, .bar)` means "not .foo or not .bar" or "not .foo and not :bar" 😵‍💫.

According to this MDN article, it's equivalent to `:not(.foo):not(.bar)`, so I assume it means "not .foo and not :bar"…
https://developer.mozilla.org/en-US/docs/Web/CSS/:not#description:~:text=%3Anot(.foo)%3Anot(.bar)

:not() - CSS | MDN

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

MDN Web Docs
Oct 15 at 6:19pmWeb
Show threadfloris 🍉Oct 15
@germanfrelo soooo also equivalent to `:not(.foo.bar)`?
Show threadGermán FreixinósOct 15
@floris That confused me even more 🤯😅. But I don’t think so. The other response is correct: https://mastodon.social/@matovius/115379702159878956
Show threadfloris 🍉Oct 15
@germanfrelo Aah that makes sense, so explicitly not `:not(.foo.bar)` 🤓
Show threadfloris 🍉Oct 15
@germanfrelo oh never mind haha, also both, misread it the first time
Show threadMartin MatovuOct 15
@germanfrelo I think it's more of an and/or situation, where it checks any element for either the ".foo" or the ".bar", but if they're both on the same element, it does the same exclusion nonetheless
Show threadGermán FreixinósOct 15
@matovius I think you’re right. Thanks!
Show threadTimothy LeverettOct 16

@germanfrelo

Good Ol' De Morgan's Laws:

NOT (foo OR bar)
:not(.foo, .bar)

equals

(NOT foo) AND (NOT bar)
:not(.foo):not(.bar)

----

NOT (foo AND bar)
:not(.foo.bar)

equals

(NOT foo) OR (NOT bar)
:not(.foo), :not(.bar)