css-:not()-with-multiple-classes

Comments

  1. User Avatar

  2. User Avatar

    Thanks…dint know this was possible, giving it a try now.

  3. User Avatar

    I think it goes without saying but having chained (:not)s just seems logically confusing. If 2 are checked for :not, then every class would be allowed. But there is clearly an additional layer of logic put into this pseudo class to make sure that a :not chain is self aware of the previous classes on the declaration.

    Oh well, good to know anyway!

  4. User Avatar

    You should also mention that with Selectors 4 spec (link) we can pass a selectors list inside the :not() function. Like :not(h1, h2, h3)

  5. User Avatar

    On first read, I found the and/or part a bit confusing, but this is basically using logical “and” to represent “or”: not(A or B) <=> not(A) and not(B). This also means that you can replace all “or” (represented in CSS by “,”) with a similar construct using “:not”:

    foo, bar { color: orange; }

    is (apart from specificity) equivalent to:

    :not(:not(foo):not(bar)) { color: orange; }

    Not sure if that is helpful in any context (where selector lists may not be allowed?).

  6. User Avatar

    Kyle, it doesn’t really need to know. They are just chained by a logical and:

    If the tag is “body” and the class list does not include “home” and the class list does not include “away” and the class list does not include “page-50”, then …

    Of course using the not yet widely available level 4 selectors (body:not(.home, .away, .page-50) would be simpler:

    If the tag is “body” and the class list does not include any of “home”, “away” or “page-50”, then …

All comments are held for moderation. We’ll publish all comments that are on topic, not rude, and adhere to our Code of Conduct. You’ll even get little stars if you do an extra good job.

You may write comments in Markdown. This is the best way to post any code, inline like `

this

` or multiline blocks within triple backtick fences (“`) with double new lines before and after.

Want to tell us something privately, like pointing out a typo or stuff like that? Contact Us.

We have a

Code of Conduct.


Be cool. Be helpful. The web is a big place. Have fun. High five.

Leave a Reply

Your email address will not be published. Required fields are marked *