CODEWITHSUNDEEP
css
Asim
Asim

Reputation: 879

css :not(), selectors and selecting descendants

Let's say I have :

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test for :not</title>
        <link rel="stylesheet" type="text/css" href="Test.css" />
    </head>
    <body>
        <div class="a">
            <p class="para">This line should be green.</p>
        </div>
        <div class="a">
            <p class="para">This line should also be green.</p>
            <div class="ds">
                <p class="para">This is another line that should be yellow</p>
            </div>
        </div>
    </body>
</html>

I want to select all the elements with class="para" but exclude those that are descendants of those elements that have a class="ds". I have this CSS:

.ds { color: grey; border-style:solid; border-width:5px;}
                
.para {color:yellow;}
                
.para:not(.ds .para) {color:green; border-style:solid; border-width:5px;} //not working

So I assume I can only have simple selectors as part of :not(S), I can't have :not (X Y). I am running in both Chrome (18.0.1025.162 m) and Firefox (10). Any ideas?

Please note: That the query is part of a bigger issue, I have some code (in gwt) that is selecting a list of elements (e.g. with class="para") from the DOM. However, I have found a bug that requires the exclusion of elements that are descendants of a particular set of elements (e.g those with a class="ds").

Upvotes: 22

Views: 15370

Answers (4)

Mahdiar Mransouri
Mahdiar Mransouri

Reputation: 722

i had the same problem and i've found the solution, .para:not(.ds *) i think this should be the solution

Upvotes: 1

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

Elements with class "para" excluding those that are immediate children of elements with class "ds" is:

*:not(.ds) > .para

Upvotes: 4

Jon
Jon

Reputation: 437336

The spec says that you can have any simple selector inside :not, where

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

So yes, you can't have a descendant selector :not(X Y). There is also the problem that when using the descendant selector you can only express positives ("when X's ancestors include a Y") and not negatives ("when X's ancestors do not include a Y");

The most practical solution would be to reverse the CSS logic so that the negative you want to express becomes a positive:

.ds .para { background:gold; }
.para { background: green }

See it in action.

Upvotes: 17

Chris Morgan
Chris Morgan

Reputation: 90742

I think you may be approaching it in the wrong way. Normal .para matches are green, and ones in .ds are yellow. To be sure, with the way you have it you would then need to remove the border once more, but that's not a problem.

.ds { color: grey; border-style:solid; border-width:5px;}

.para {color:green; border-style:solid; border-width:5px;}

.ds .para {color:yellow; border-style: none; }

This fits with what I see as the natural way of interpreting the formatting.

Upvotes: 0

Related Questions