Feature Request: Support Descendant Combinators (e.g. :hover .class) in Builder

[webstudio-issue-reporter]

User story

As a designer using the Webstudio Builder, I want to style child elements when their parent is hovered (e.g., targeting .child-class when the parent has :hover), so that I can create complex interactive hover effects natively in the visual builder without resorting to custom CSS.

Summary

Allow defining descendant combinator selectors like :hover .class in the visual builder.

What the agent tried

1. Attempted to add a custom state/selector like :hover .child-class in the builder's styling panel.
2. Observed that only basic pseudo-states are supported and descendant combinators cannot be visually authored.

Expected behavior

The styling panel (States/Classes) should allow adding complex CSS selectors, specifically descendant combinators combined with pseudo-states, such as :hover .class or :hover > #id.

Actual result

Currently, the builder supports adding standard pseudo-classes (:hover, :active) and pseudo-elements (::before, ::after) via custom states, but it does not allow creating complex CSS selectors like :hover .class to target specific child elements when a parent's state changes.

Recovery attempts

1. Resorted to writing a custom CSS embed block to handle descendant selectors manually.

User impact

Limits the ability to build advanced interactive UI components visually, forcing users to write custom CSS code blocks as a workaround.

Technical context

CSS descendant combinators and parent-state driven styling are essential for interactive components (e.g., hovering a parent Card to reveal or animate a hidden Button inside it).

Agent environment

• Client: antigravity
• Provider: unknown
• Model: gemini
• Reasoning effort: unknown
• Trigger: user-requested
• Category: feature-request

Technical runtime

• CLI: 0.291.0
• Node.js: 24.18.0
• Operating system: win32 10 (x64)
• Execution mode: mcp
• API contract: public-api:iqd6ok

Acceptance criteria

1. Users can define a state/style modifier that includes a descendant combinator.
2. The generated CSS correctly outputs rules like .parent-class:hover .child-class.

[iocouto]

If this has been implemented, it significantly changes the way Developers are supposed to use Webstudio. The current/previous approach was to define CSS variables at the parent level, and use them in the children as required, changing their values during the parent's :hover state. If this is no longer the way we're expected to build this kind of interaction, and if there is a visual way to build child/dependent selectors in the UI, we need to be told...

[kof]

@iocouto both are supported now, css variables is something I would still recommend more