Optional Descendant Selector

CSS
1

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
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.

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.

4

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

5

@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:

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.