Sometimes i need to target descendant elements but also the element itself.
Would be great if i had a single selector for this
button.inverted,
.inverted button {
color:white;
background:black;
}
Maybe something like this?
.inverted | button {
color:white;
background:black;
}
other situations:
#component .item | .highlight
is equivalent to
#component .item .hightlight, #component .item.hightlight
.inverted | button span
is equivalent to
.inverted button span, button.inverted span
In short: the “optional descendant selector” combines the “descendant selector” and the combination of the surounding compound selectors.
Maybe its to complicated mixing “compound Selectors” and “complex selector”…?
1 Like
Garbee
September 13, 2018, 8:50pm
2
I do believe this would introduce the concept of one selector expanding to multiple selections. Is there any current selectors that do something similar?
Personally I’d be very worried introducing something like this. It feels to me it should be in a preprocessor setup. Since the expanded rules could have different specificities it also makes the raw stylesheet more difficult for a developer to debug.
jhpratt
September 13, 2018, 10:26pm
3
Would :matches()
not work for this purpose when combined with nesting?
button.inverted, .inverted button
could be written as @nest button:matches(&.inverted, .inverted &)
NB: I’m not 100% clear on how @nest
works together with :matches()
. What I wrote is how I presume it would work.
Sorry, I do not understand the ask here. Is this like a limited form of :has ?
@Garbee
I am absolutely your opinion
@jhpratt
i don’t know “matches” well, but yes maybe it could help!
Maybe :matches sould introduce :scope ?
button:matches(.inverted, .inverted :scope)
I filled a issue:
jhpratt
September 14, 2018, 4:27pm
6
Perhaps you should take a look at :matches
. I believe it solves your issue. That’s aside from the fact that :scope
already exists.