Unable to do `:not(.foo .bar)`

Question

Why can't I do div:not(.wrapper2 .exception)? Ie. all divs except .wrapper2 .exception.

HTML:

<div class="wrapper1">
    <div>
        <p>Hi</p>
    </div>
    <div class="exception">
        <p>Hi</p>
    </div>
</div>
<div class="wrapper2">
    <div>
        <p>Hi</p>
    </div>
    <div class="exception">
        <p>Hi</p>
    </div>
</div>

CSS:

div:not(.wrapper2 .exception) {
    background: blue;
    color: white;
}

Unclear what you're asking. Is the one you want to except the `.wrapper2 .exception`, or `.wrapper2` and `.exception`? — Scimonster, Sep 23 '14 at 12:13
Hi! All divs except `.wrapper2 .exception` yeah. Thanks. Updated question. — Mark Boulder, Sep 23 '14 at 12:15
This explains the reason: http://stackoverflow.com/questions/7403129/combining-not-selectors-in-css/7403148#7403148 — Hashem Qolami, Sep 23 '14 at 12:20

score 3 · Accepted Answer · answered Sep 23 '14 at 12:11

3

You can't combine not() selectors like this, only one selector at a time can go in.

To select all divs except .exception inside .wrapper2:

div:not(.wrapper2) div:not(.exception)

answered Sep 23 '14 at 12:11

Stephan Muller

25,898
16
83
124

How do you know the OP didn't intend for it to only apply to the last `div`, which is `.wrapper2 .exception`. – Scimonster Sep 23 '14 at 12:13
You're right, I misunderstood the question. Updated my answer – Stephan Muller Sep 23 '14 at 12:16
Thanks guys I really appreciate it! – Mark Boulder Sep 23 '14 at 12:18
Note that this will only work if there are exactly two levels of divs - any more and it will not work correctly. See http://stackoverflow.com/questions/20869061/is-the-css-not-selector-supposed-to-work-with-distant-descendants – BoltClock Sep 23 '14 at 16:41
It seems BoltClock and Fabrizio Calderan are right. I think the answer below by Marc is better in retrospect. – Stephan Muller Sep 23 '14 at 16:44

Marc Audet · Answer 2 · 2014-09-23T12:30:56.647

If you are targeting all the child div's except for the last one, this is what is needed.

div > div {
    background: blue;
    color: white;
}
div.wrapper2 > div.exception {
    background: none;
    color: inherit;
}

<div class="wrapper1">
    <div>
        <p>Hi</p>
    </div>
    <div class="exception">
        <p>Hi</p>
    </div>
</div>
<div class="wrapper2">
    <div>
        <p>Hi</p>
    </div>
    <div class="exception">
        <p>Hi - not this one!</p>
    </div>
</div>

Unable to do `:not(.foo .bar)`

2 Answers2