Why is the :not() selector not working with the * selector?

Question

I'm trying to select all elements, then select elements with the btn class, except within elements with navbar, footer or mobile-menu classes.

I have this code:

*:not(.navbar):not(.footer):not(.mobile-menu) {
  .btn {
    font-size: 20px;
    padding: .8rem 2rem;
  }
}

But it's not working.

Could someone explain why to me please?

EDIT: I'm using sass

You can't nest rules in CSS (unless you're using scss? If so, please note this in your question). Change your rule to `*:not(.navbar):not(.footer):not(.mobile-menu) .btn` and it should work — elveti, May 02 '19 at 12:45
the `html` element will get selected by `*:not(.navbar):not(.footer):not(.mobile-menu)` so you will select all the btn — Temani Afif, May 02 '19 at 12:49
This answer explains everything pretty well: https://stackoverflow.com/a/10711731/7585166 — Arthur Z., May 02 '19 at 12:50
@escanxr Ok, then you can use `body *:not(.navbar):not(.footer):not(.mobile-menu) .btn`, for reasons given by other answerers (it matches `html` and `body`) — elveti, May 02 '19 at 13:04
@TemaniAfif it is related. Read the 3-rd paragraph of the answer of the question you've linked. It says "... :not() has been enhanced to accept full complex selectors containing combinators, including the descendant combinator ... but once it is implemented, then you will be able to use it to exclude elements with certain ancestors". The answer I've linked points out that combinators are not supported in CSS. — Arthur Z., May 02 '19 at 13:07
@ArthurZ. you confirm with this quote that is not related .. look at his selector, we are dealing with simple selector inside not() and not complex one and it's supported and working fine. — Temani Afif, May 02 '19 at 13:27
@TemaniAfif well yeah, you are right. At the moment of quoting that I meant that both linked answers are related.I admit that the link you've provided almost directly answers OP's question. The link I've posted is not directly related to the question so I take my words "explains everything pretty well" back, athough it still relates to the same topic. Sorry for confusion. — Arthur Z., May 02 '19 at 14:08

score 1 · Accepted Answer · answered May 02 '19 at 12:50

Given:

<body>
    <div class="navbar">
        <div class="btn">
        </div>
    </div>
</body>

*:not(.navbar):not(.footer):not(.mobile-menu) matches <body> and then .btn matches <div class="btn">.

It doesn't matter that *:not(.navbar):not(.footer):not(.mobile-menu) doesn't match <div class="navbar"> because <div class="btn"> is still a descendant of <body>.

Why is the :not() selector not working with the * selector?

1 Answers1