A partial archive of discourse.wicg.io as of Saturday February 24, 2024.

Optional Descendant Selector

tobias_buschor
2018-09-10

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”…?

Garbee
2018-09-13

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
2018-09-13

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.

briankardell
2018-09-13

Sorry, I do not understand the ask here. Is this like a limited form of :has ?

tobias_buschor
2018-09-14

@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
2018-09-14

Perhaps you should take a look at :matches. I believe it solves your issue. That’s aside from the fact that :scope already exists.