nesting inside css :not() selectors
:not()
only accepts one simple selector at a time; this is mentioned in the Selectors 3 spec:
The negation pseudo-class,
:not(X)
, is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
The simple selectors in your example would be the two div
tokens that you have. Other simple selectors include class selectors, ID selectors, attribute selectors and pseudo-classes. It does not accept more than one simple selector, nor does it accept combinators like >
or space.
Depending on which elements you're trying to select exactly, there may not be a way to exclude div > div
:
If you only want to select elements that are children of a
div
, that are themselves notdiv
, use this instead:div > :not(div)
If you only want to select
div
elements whose parent element is not adiv
, use this instead::not(div) > div
If you want to use this negation by itself, selecting all other elements, then there isn't a way using just a selector.
The only other viable workaround in CSS that I can think of is to apply styles to the elements you want without the :not()
expression, then undo them for div > div
. This works for any set of elements you're trying to target; the disadvantage is that not all properties can be easily reset.
Alternatively, if you're using jQuery, which does support :not(div > div)
unlike the CSS version, you can place the selector in a script and, for instance, have jQuery apply a class name to those elements then target that class in your CSS.
:not selector does not work for nested elements
Your :not
condition is met as true
for your class="wrapper"
elements, because they are not with component
class. Using :not
will apply to each element seperatly, without parent-child relationship:
<div class="user-content">
<div class="component"> :not(.component) is false
<div class="wrapper"> :not(.component) is true, so rule applies.
<p>Hello!</p>
</div>
</div>
</div>
To create parent-child relationship, use >
in your rule:
.user-content > :not(.component) p
CSS nested :not() selector
For this specific scenario you could use
#content > ul {list-style:none;}
This will target direct children of the #content
element
CSS not with nested selectors
In CSS3, :not
only accepts a simple selector. The >
combinators prevent it from being a simple selector--the CSS4 specification refers to that instead as a complex selector.
css not being applied to a nested class
When I copy your css to chrome, there is some weird character right after the closing }
of .welcome
it seems like it's stopping chrome from interpreting the next css lines
When you remove this character the following css selectors (e.g. .form-login {
) are evaluated again and will be applied to your form element - everything should work then
Using CSS :not selector in LESS nested rules
It is not a LESS issue as much as your css selector syntax. The p:not(.nested)
is saying all p
elements without the .nested
class themselves, what you state is that the .nested
class is on a div
in which the p
resides, so you need this:
.outerclass {
h3 {
color: blue;
}
:not(.nested) p,
> p {
color: green;
}
}
UPDATE: I removed the div
and added the direct child p
instance, so that the CSS output would properly target all p
in .outerclass
except for the exception.
CSS Output for p
elements would be
.outerclass :not(.nested) p,
.outerclass > p {
color: green;
}
The above will target any direct child p
elements and any nested p
elements in .outerclass
except those that are children of your .nested
element.
An issue
The issue BoltClock is noting is if the p
is nested deeper than being the immediate child of the .nested
element. See this fiddle where the last p
element is still targeted even though it is within a .nested
class.
If the p
element will always be the direct child of .nested
there is no issue. Or if the .nested
is always the direct child of .outerclass
but the p
maybe nested deeper, then the above selector can be changed to > :not(.nested) p
to produce CSS of .outerclass > :not(.nested) p
which will then work for all p
under .nested
.
The problem will be if the .nested
in relation to .outerclass
and the p
within .nested
are both at some arbitrary depth to those parents. No css selector could handle that adequately.
Why is nested nth-of-type selector not working?
nth-of-type
matches only elements and not class names.
CSS not using nested className rules
The problem is this rule:
& .collapsed {
It makes the output:
.error-notification .accordion-container .collapsed
While what you want is:
.error-notification .accordion-container.collapsed
You can achieve this result by removing the space:
&.collapsed {
You can check this here: https://www.sassmeister.com/gist/a41313db236a8e7edbb9e9748117e61b
Related Topics
Why Doesn't Font Awesome Work in My Shadow Dom
Has the ::-Webkit-Selection Selector Ever Been Supported
Do Ie Browsers (IE6, 7, 8) Support @Font-Face
Expanding Cells in CSS Grid Layout
Is the 'Frosted Glass' Effect Implementable with CSS Only at This Time
Can a Background Image Be Larger Than the Div Itself
How to Set a CSS Border on One Side Only
Why Does SASS Prepend an Incorrect @Charset Rule
Make CSS Apply Only for Opera 11
How to Force This CSS Grid to Wrap to a New Line Without Specifying Minmax Sizes
Applying Webkit Transitions to Pseudo Elements
What's the Difference Between CSS3 Translate Method and CSS2 Relative Positioning