Menu
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").
408
descendant selector (space) child selector (>) adjacent sibling selector (+)
The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc) element matching the first selector.
:not() The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.
Descendant Selector :The descendant Selector selects all child elements of the selected parent element. In this example, the descendant selector selects all li of selected ul elements. 2. Direct Child Selector : This selector selects only the direct child of the selected element.
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.
86
Elements with class "para" excluding those that are immediate children of elements with class "ds" is:
*:not(.ds) > .para
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
