Does Reflex support :has pseudo-class?

[egonsung]

I can't figure out how to use :has. Pseudo-classes like hover goes something like:
_hover={"color": "red"},

If I want to write something like this:
.container:has(div:hover){
color: red;
}

Is this possible in Reflex? If so, how should I write it?
Thank you all.

[manimovassagh]

Reflex does not have a direct built-in syntax for :has() pseudo-class, but you can achieve it through raw CSS styles.

Option 1: Use rx.style with raw CSS

You can inject arbitrary CSS using rx.el.style:

def index() -> rx.Component:
    return rx.fragment(
        rx.el.style("""
            .container:has(div:hover) {
                color: red;
            }
        """),
        rx.box(
            rx.box("Hover me"),
            class_name="container",
        ),
    )

Option 2: Use the style prop with class names

Define your styles in a CSS file or a style dict at the app level, then apply class names:

# In your rxconfig or app setup:
app = rx.App(
    stylesheets=["/custom.css"],
)

Then in assets/custom.css:

.container:has(div:hover) {
    color: red;
}

And in your component:

rx.box(
    rx.box("Hover over this div"),
    class_name="container",
)

Option 3: State-based approach (if you need it reactive)

If you need Python-level control, you can use event handlers instead of pure CSS:

class State(rx.State):
    child_hovered: bool = False

def index() -> rx.Component:
    return rx.box(
        rx.box(
            "Hover me",
            on_mouse_enter=State.set_child_hovered(True),
            on_mouse_leave=State.set_child_hovered(False),
        ),
        color=rx.cond(State.child_hovered, "red", "inherit"),
    )

The raw CSS approach is usually the cleanest for pure styling concerns like this. The :has() pseudo-class has good browser support now (all major browsers since late 2023), so it'll work fine.