CSS: use not: to exclude not only div, but also all the div within it?

Question

I want to use the not: so it will exclude ALL the p elements within the div2 element. This is the html file:

<body>
    <p> not in any div </p>
    <div id="div1">
        <p> div1 text1</p>
        <div>
            <p> div2 inner text2</p>
            <div>
                <p> div1 innermost text3</p>
                <p> div1 innermost text4</p>    
            </div>
        </div>
    </div> 

    <div id="div2">
        <p> div2 text1</p>
        <div>
            <p> div2 inner text2</p>
            <div>
                <p> div2 innermost text3</p>
                <p> div2 innermost text4</p>    
            </div>
        </div>
    </div>

    <div id="div3">
        <p> div3 text1</p>
        <div>
            <p> div3 inner text2</p>
            <div>
                <p> div3 innermost text3</p>
                <p> div3 innermost text4</p>    
            </div>
        </div>
    </div>
</body>

This is the CSSfile I use, (obviously) it's not working well:

div:not(#div2) p{
    color:green;
}

This only excludes the p element with: "div2 text1" but not the other three within div2:

I believe this is because the "not:" only excludes the div2 div BUT NOT the two divs within it.

How do I change the context within the ":not" so it will include not only the div2 div BUT ALSO ALL the divs within div2 ?

What I am trying to do can be easilly achieve by using jQuery:

$('div p').not('#div2 p');

To summarize: How do I change this css line:

div:not(#div2) p{

So it will do (select) the same as the jQuery line? or in other words:

To select all p elements that are inside a div, unless it's div2. Or in other words:

To select all the p elements that contains either the word div1 or div3 (but without using this information)

I would just add a class to the containing divs that need to have green text. Use the class as the selector. Skip the headache of all this :not business. — Woodifer, Jul 02 '13 at 21:58
to Woodifer, i have like 30 divs like those, i dont wanna add each of them a class — Roko, Jul 02 '13 at 21:59
to Jon: yes- i can do it like that. But I just wanted to learn how to use the :not thingy. As you can see question is how to use the :not command, (and not how to solve the problem using other way) Ty though. — Roko, Jul 02 '13 at 22:06

score 6 · Accepted Answer · answered Jul 02 '13 at 22:05

6

Have you tried the child selector?

body > div:not(#div2)
{
    color:orange
}

This will target only divs that are a direct descendant of the body. Fiddle:

http://jsfiddle.net/Xk5rb/

answered Jul 02 '13 at 22:05

Ben

10,106
3
40
58

2

Note that this will only work for attributes whose default value is `inherit`, like `color` (won't work for e.g. `border`) because you are not technically selecting the divs in question. – Jon Jul 02 '13 at 22:08
3

@Jon - Yes, true. Although you can append a `p` to that selector - `body > div:not(#div2) p` if you specifically needed to target that and it'd still work. :-) – Ben Jul 02 '13 at 22:14
1

@Ben: That's more like it :-) – Jon Jul 02 '13 at 22:17

CSS: use not: to exclude not only div, but also all the div within it?

1 Answers1