0

I don't understand why :not() selector behave like this... What I'm trying is to select a class, that doesn't have as children another class, however, I'm facing a problem that I dont understand this:

.a :not(.b){ color: red;}
.b{ color: green;}
<div class='a'>
dasdsa
  <div class='b'>
  dsadas
    <div class='a'>
      dsadasdas
       <div class='b'>
        dsadadasd
      </div>
    </div>
  </div>

</div>

https://jsfiddle.net/dg4f4agh/1/

When I'm using the ">" operator it's behaving as I espect...

.a>:not(.b){ color: red;}
.b{ color: green;}
<div class='a'>
dasdsa
  <div class='b'>
  dsadas
    <div class='a'>
      dsadasdas
       <div class='b'>
        dsadadasd
      </div>
    </div>
  </div>

</div>

https://jsfiddle.net/dg4f4agh/2/

Can someone explain me why the first exemple isn't working, and how I can do what I want to accomplish?

Brada
  • 58
  • 5
  • 1
    The second example, the nested `.a` isn't matching your selector - it's just inheriting `color` from it's parent `.b`. If I'm understanding what you're trying to do, it isn't possible because you can't affect a parent element based on children in CSS. CSS only reads down the DOM - it doesn't go up/backwards. You'll need JS if you want the parent to look a certain way based off of some condition of it's children. – Michael Coker Mar 06 '17 at 21:43
  • 1
    **Your first example:** "All children of `a` that are NOT `b` should be red. All `b` should be green." **Your second example:** "Any *direct descendant* of `a` that is not `b` *(there are none)* should be red. All `b` (and unspecified children) should be green." Can you more clearly explain what you're trying to do? – Tyler Roper Mar 06 '17 at 21:46
  • @Santi Oh, Thank you Santi, now I understand, I think that I have selected all a that doesnt have(.b) as children... – Brada Mar 06 '17 at 21:48
  • 1
    In neither example have you selected "all `a`" in any facet. The space after the `a` in your first example indicates that you are specifically targeting *children of `a`*, and the `>` in your second indicates that your targeting *direct descendant children* of `a`. Neither of your examples target the `a` class specifically, only its children. Any styling to an `a` element is simply because it satisfies the child selector. – Tyler Roper Mar 06 '17 at 21:50
  • @Santi Can you explain me this example too? https://jsfiddle.net/dg4f4agh/3/ .. please :) – Brada Mar 06 '17 at 21:55
  • 1
    That one is a bit trickier, but it's saying "Turn all `a` red. Any `b` that is a child of something that isn't `a`, turn green." - So you may ask, both `b` are children of `a`, so why are they green?" It's because you're saying "Where **any parent** isn't `a`. Your `body` tag is not `class="a"`, and so those `b` elements still satisfy the selector. – Tyler Roper Mar 06 '17 at 22:00
  • aha, thank you a lot :) – Brada Mar 06 '17 at 22:01
  • The easiest way to figure this stuff out is just to move from left to right. If you start with the left (`:not(.a)`) - this selected *everything on the page that is not `a`*. Then you have `.b` , which means "children that are `b`". So, it's easier to see this way what's happening: "Give me every item on the page that isn't A. Now, from everything I selected, find any children that are `b`." – Tyler Roper Mar 06 '17 at 22:05
  • Ah, I've seen this tip before but I forget about it :D... one more thing if you have time... https://jsfiddle.net/dg4f4agh/5/ I uderstand how this works, but it's a way that I can do that works in nesting items like this? – Brada Mar 06 '17 at 22:24
  • https://jsfiddle.net/dg4f4agh/6/ I've manage to somehow make it work... but maybe you know something better :) – Brada Mar 06 '17 at 22:34
  • @Brada https://jsfiddle.net/tr_santi/dg4f4agh/7/ – Tyler Roper Mar 07 '17 at 14:28

0 Answers0