How to target a selector only if it's NOT child of a specific element (so only if it's the root)

Question

I don't understand why the following code has not desired behaviour:

    .toggle {
      color: red;
    }
    
    :not(.list) .toggle {
      font-weight:bold;
    }

  <div class="container">
      <a href="#!" class="toggle">Toggle</a>
      <ul class="list">
        <li><a href="#!">Link 1</a></li>
        <li>
          <div class="container">
            <a href="#!" class="toggle">SubToggle</a>
            <ul class="list">
              <li><a href="#!">SubLink 1</a></li>
              <li>
                <a href="#!">SubLink 2</a>
              </li>
              <li><a href="#!">SubLink 3</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#!">Link 3</a></li>
      </ul>
    </div>

I thought that using :not() would result in applying "bold" only to main "Toggle" link but instead it applis "bold" to all of red ones. Why?

Please, note that this code is nested with same class names, I don't want to target specific levels with different css classes, I would like to target elements only with descendant selectors and other operators

Here is present also a jsFiddle to directly try.

you try to do this? https://jsfiddle.net/zeevkatz/1yy72grr/1/ — Zeev Katz, Oct 24 '16 at 09:14
@LucaDetomi: This is a known behavior. It happens because the second toggle's (the Sub toggle) immediate parent also doesn't have `class='list'` so that also applies the `:not(.list) .toggle`. — Harry, Oct 24 '16 at 09:20
@Harry Yes, it's true, but your description would convince me if I wrote a direct child selector using `>`. Here I don't specify how deep is hierarchy to find (or not find) `.list` class — Luca Detomi, Oct 24 '16 at 09:22
@ZeevKatz Yes, I tried and it's my actual solution, but I would like to avoid (if possible) to override internal elements because in real case there are many CSS properties to be overridden, not only `font-weight` (this is only a simplified exampe) — Luca Detomi, Oct 24 '16 at 09:24
@LucaDetomi: See `:not(.list) .toggle` would select all .toggle who are not descendants of `.list`. You have a clash. The outermost has but the `body` doesn't, and the inner one doesn't too. So which one do you want CSS to consider as the ancestor? — Harry, Oct 24 '16 at 09:27
Possible duplicate of http://stackoverflow.com/questions/35051671/cascading-with-css-not-pseudo-class/35051684#35051684 I am hesitant to close only because you want a workaround which doesn't include targetting each level separately. — Harry, Oct 24 '16 at 09:40
@Harry The `body > element` selector indeed resolved my particular issue at hand. — Serge Stroobandt, Nov 13 '16 at 10:36

Mike Harrison · Answer 1 · 2016-10-24T14:56:04.090

5

I think you might want this:

.toggle {
  color: red;
  font-weight: bold;
}

div *:not(.list) .toggle {
  font-weight: normal;
}

edited Oct 24 '16 at 14:56

answered Oct 24 '16 at 09:19

Mike Harrison

1,020
2
15
42

The result it the opposite of what desired. It's the main Toggle that should be "bold" – Luca Detomi Oct 24 '16 at 09:25

score 3 · Answer 2 · edited Mar 13 '20 at 02:34

3

:not does not support CSS Combinators.

Your only way to do this is:

.toggle {
  color: red;
}

.toggle {
  font-weight:bold;
}

.list .toggle {
  /* Override previous */
}

Fiddle

edited Mar 13 '20 at 02:34

Kevin Kopf

13,327
14
49
66

answered Oct 24 '16 at 09:31

Zeev Katz

2,273
2
16
42

2

Not strictly true. There is nothing in the RFC about not supporting combinators. While `:not(.class) .otherClass` does not work, `:not(.class) > .otherClass` works fine. Here's proof: https://jsfiddle.net/k0m7512j/ However, in the circumstances OP presented, your answer is the correct one. – Kevin Kopf Mar 13 '20 at 02:35

Jared Chu · Answer 3 · 2016-10-24T09:54:35.040

I tried so many times but this is the only way I can do:

.toggle {
  color: red;
  font-weight:bold;
}

.list .toggle{
  //override
  font-weight:normal;
}

This is how to use :not the right way: add specialToggle for elements you do not want to select

<a href="#!" class="toggle specialToggle">SubToggle</a>

and then css:

.toggle {
  color: red;
}

.toggle:not(.specialToggle) {
  font-weight:bold;
}

https://jsfiddle.net/s249tyur/3/

CamBarker · Answer 4 · 2016-10-24T13:30:34.550

1

If the structure is always going to be the same you could try using the greater-than sign (>), it means only apply the style to the immediate children of the class.

.container > .toggle {
  font-weight:bold;
}

Or if the container is not always going to have the same class, but is always a div element you could use:

div > .toggle {
  font-weight:bold;
}

edited Oct 24 '16 at 13:30

answered Oct 24 '16 at 10:04

CamBarker

41
7

Please don't call a greater-than sign a chevron. > is not the same as ›. The situation on this site is bad enough as it is, with people using less-than and greater-than signs as chevrons, making the words inbetween come out invisible. – Mr Lister Oct 24 '16 at 11:42
Edited, thank you, i was not aware that it was an issue to used to using the terms around the office. – CamBarker Oct 24 '16 at 13:32
Well, the issue is that people use them as quotation marks in posts here, and the system handles them as HTML tags. So e.g. people write "I hit " and it comes out as "I hit " because unknown HTML tags are ignored. – Mr Lister Oct 24 '16 at 14:27
**greater-than sign (>) only selects immediate children** - This saved my day. Thanks! – Naveen Jul 18 '17 at 07:53

How to target a selector only if it's NOT child of a specific element (so only if it's the root)

4 Answers4