Question

Here is the html layout

<div class="wrap">
    <div class="section">
        <span class="text">text1</span>
    </div>
    <span class="text">text2</span>
<span class="not-text">don't color me!</span>
</div>

Im trying to give a style to all "text" spans which are not in the "section" divs.
I tried this, but it doesn’t seem to be working

.wrap :not(.section) .text 

fiddle

Any help is greatly appreciated!

Edit: There are several workarounds for this case including the use of > operator like in ".wrap > .text", but I would like to know how to make the :not selector working, to make use of it in the future

Answer 1

When you use .wrap :not(.section) .text, this is what you’re telling the browser:

1. Look for an element with a class of .text
2. which lives inside an element that does not have a class of .section
3. which lives inside
   an element that has a class of .wrap

If you look closely at your markup, none of your elements meet that selector criteria.

In the markup you provided, I don’t think you can specifically select those .text elements that are not descendants of .section using :not().

The closest you could get is by using a direct descendant selector, like this:

.wrap > .text

You could also select and style all .text descendants of .wrap (whether direct or not), and then cancel those styles for any .text elements inside of .section, like this:

.wrap .text {
  // your styles here
}

.wrap .section .text {
  // your cancelled styles here
}