✨ Master CSS Parent Combinator

[1aron]

Description

Suppose there is an SVG to be filled with black when the parent button is disabled.

<button disabled>
    <svg>...</svg>
</button>

Current

Reactive Syntax

<button disabled>
    <svg class="[disabled]>{fill:black}">...</svg>
</button>

Generated CSS:

[disabled]>.\[disabled\]\>\{fill\:black\} {
    fill: #000000
}

Expect

Parent Combinator

<button disabled>
    <svg class="fill:black<[disabled]">...</svg>
</button>

Generated CSS:

[disabled]>.\{fill\:black\}\<\[disabled\] {
    fill: #000000
}

There is a child combinator > in native CSS, but there has been no syntax for selecting the parent.

But now, using the syntactic features of Master CSS, it is easy to create parent combinators <.