Vanilla nested CSS query
Hi all,
I wonder if anyone can help me figure out why the following CSS will not work?
::part(form-control-label) {
.filter-bar & {
color: yellow;
}
}
but this CSS does:
::part(form-control-label) {
color: yellow;
}
As far as I know, the nested selector (&) is allowed to be used this way so I expect it to work.
Any suggestions?
9 Replies
does
.filter-bar ::part(...) exist?Absolutely!
does that selector work?
what i think that you're trying to do is
.filter-bar::part(...) instead
which is a WIDLY different selectorNo. the part is INSIDE .filter-bar.
then it seems that the selector you have should work
i tested it in jsfiddle and it works, but with other elements
@ἔρως Got the solution, With native CSS nesting, the
& selector, when used, cannot become a pseudo element. Just not allowed and hencewhy it wasn't working for me
@ἔρως Explanation is here: https://drafts.csswg.org/css-nesting/#nest-selector:~:text=The%20nesting%20selector%20cannot%20represent%20pseudo-elements%20(identical%20to%20the%20behavior%20of%20the%20%3Ais()%20pseudo-class)that makes sense
i had no idea
thank you
It's a very subtle bit of information. It does say here: https://drafts.csswg.org/css-nesting/#issue-62c479a8
" We’d like to relax this restriction, but need to do so simultaneously for both :is() and &, since they’re intentionally built on the same underlying mechanisms. (Issue 7433)"
So there is hope that this will change in the future. It would make it work like it does in SCSS whcih would be fantastic!
i understand why it doesn't work like that, but it is a gotcha that should be more known