CSS :not() selector not working as expected (nested)

Question

G'day all,

I'm once again struggling with :not(), it does not behave as I expect it to. So I created the below fiddle to allow us to start at the same point.

The Question

How do I make the middle grouping of links (under the Blue text) all blue in this example using the :not() selector.

Reference Code

Example Preface: This is a simplified example. I'm not looking for someone to say "Dude, you can move the .red class and it'll work like you want. No :not() at all." ... I'm trying to work out :not() here.

Testing example - https://jsfiddle.net/2tbwkcyg/1/

The structure is

<div> <!-- control group | green -->
    Green<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
</div> <!-- /control group | green -->
<div class="red">
  <div class="blue">
    Blue<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div> <!-- /blue -->
  <div>
    Red<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div>
</div> <!-- /red -->

while the (relevant) CSS is

a{color:green}
.blue a{color:blue}
.red :not(.blue) a{color:red}

Expected Results

Due to that last line in the CSS, I'm expecting the middle group of links to be blue, because - it's in the .red section, and they are within the .blue class.

Therefore, the expected result is:

Six Green links
Six Blue links
Six Red links that is, three x two of each colour.

Actual Results

But with that CSS, I get:

Six Green links
Four Red links + Two Blue links
Six Red links

I have tried many of the solutions & suggestions here on StackOverflow, such as wrapping the selector inside the :not() with double quotes, using * before :not() and the like. But none of that appears to work. (None of which are noted on the definition btw: https://developer.mozilla.org/en-US/docs/Web/CSS/:not )

Point of Interest: I've just put in another row (the Direct one), and it seems to imply that the :not() part must immediately precede the next element selected - as they show as blue. While the ones another level down do not.

Browser Compatibility

All major browsers are on the table for this one.

I.E., Opera Mobile, QQ and Baidu Browsers are not considerations.

Thanks in advance! :)

-- EDIT --

@robby-cornelissen pointed out that on the MDN article I linked above it says:

This selector only applies to one element; you cannot use it to exclude all ancestors. For instance, body :not(table) a will still apply to links inside a <table>, since <tr> will match with the :not() part of the selector.

Which is sad. Because that's what I wanted. I wanted to have a negating class/selector somewhere between the defining class/selector and the subject, to prevent the rules applying - rather than setting / overriding with multiple lines.

@kmoser did however manage to make this sing a little using a >. It seems that if you "bind" the :not() to an immediate parent it works and overrides :not()'s implied relationship with the immediate child.

I think MDN is pretty clear on this point: "This selector only applies to one element; you cannot use it to exclude all ancestors." — Robby Cornelissen
– Robby Cornelissen, Commented Jun 10, 2022 at 4:21
.red>:not(.blue) a{color:red} seems to give the results you're looking for. See Fiddle here — kmoser
– kmoser, Commented Jun 10, 2022 at 4:25
@RobbyCornelissen - Oh look at that. Thank you for pointing that out. I ... don't know how I missed / failed to understand that. Although that is disappointing. — Mark
– Mark, Commented Jun 10, 2022 at 4:54
@kmoser - Interesting perhaps you can tie it to the previous selector. I shall test that. Thanks :) — Mark
– Mark, Commented Jun 10, 2022 at 4:56

A Haworth · Accepted Answer · 2022-06-10 07:29:20Z

:not is working as expected (well, IMHO).

When you set:

.red :not(.blue) a {
  color: red;
}

You are saying 'when you find an element with class red make any link within any element that is a child, grandchild, great-grandchild etc that does not have class blue have color red'.

So the div and the nav which are children of the blue div are selected.

Then we may question selectivity and cascading.

Turns out that

.red :not(.blue) a {
  color: red;
}

and

.red .blue a {
  color: blue
}

have the same weight selectivity wise (which seems logical to me).

So here's your code but with these two settings swapped round:

a {
  color: green
}

.red :not(.blue) a {
  color: red;
}

.red .blue a {
  color: blue
}

<div>
  <!-- control group | green -->
  Green<br>
  <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
  <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
  Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
</div>
<!-- /control group | green -->
<div class="red">
  <div class="blue">
    Blue<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div>
  <!-- /blue -->
  <div>
    Red<br>
    <nav>Nav: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></nav>
    <div>Div: <a href="/">Testing Link</a> | <a href="/">Testing Link</a></div>
    Direct: <a href="/">Testing Link</a> | <a href="/">Testing Link</a>
  </div>
</div>
<!-- /red -->

That's an interesting find @a-hawoth. I'll have to test this further when I'm back at work. But it looks like a promising answer.

Christian · Accepted Answer · 2022-06-10 22:47:56Z

0

I think a tag is not in div it is inside nav so we can use

.red :not(.blue) nav a { color: red }

or you can make another div for blue not inside red

edited Jun 10, 2022 at 22:47

Christian

5,6724 gold badges30 silver badges45 bronze badges

answered Jun 10, 2022 at 5:38

Mohammad Ali

3372 silver badges11 bronze badges

1 Comment

Mark Over a year ago

Sorry, this does not achieve the outcome. Your answer also specifically targets the nav a tags, not all elements.

Collectives™ on Stack Overflow

CSS :not() selector not working as expected (nested)

The Question

Reference Code

Expected Results

Actual Results

Browser Compatibility

-- EDIT --

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The Question

Reference Code

Expected Results

Actual Results

Browser Compatibility

-- EDIT --

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related