A modern programming language that makes developers happier.

kotlinlang

How can I change a child element CSS when the parent is hovered with Compose Web's Style DSL?

In CSS, it is like this
```.parent:hover .child { /* rules here */ }```
However I'm not able to figure out how to represent that in the Style DSL :disappointed:

```object MyStyleSheet : StyleSheet() {
   init {
     ".parent:hover .child" {
        /* rules here */
     }
   }
}```
or
```object MyStyleSheet : StyleSheet() {
   val parent by style {}
   val child by style {
       parent + ":hover " + self {
           /* rules here */
       }
   }
}```


The second snippet doesn't seem to be working, it is applying the rules to the child even if I'm not hovering the parent :sob:

However the first snippet works without any issues :slightly_smiling_face:

<@UKNRCSS1L>, can you paste here how exactly looks snippet which doesn’t work for you? I need to check it. It should work

<@UK96J9J68>
```object TestStylesheet : StyleSheet() {
    val parent by style {
        backgroundColor(Color.red)
    }

    val child by style {
        fontSize(16.px)

        parent + ":hover " + self {
            /* rules here */
            fontSize(32.px)
        }
    }
}```

thanks, i’ll check it. It looks like a bug.

could you try?

```(parent + ":hover " + self) {
            /* rules here */
            fontSize(32.px)
        }```


Also doesn't work: Only the "fontSize(16.px)" rule is applied

oh… i think i know what’s wrong. parent is just “parent”, while it should be “.parent”

Try
```className(parent) + ":hover " + self```


className seems to return a CSSClass object, so it fails to + with a string

yeah, it’s signature problem. I’ll fix this

problem is here. Anyway thank you for feedback. I’ll fix this stuff

I'm not sure why but I tried
```init {
    "$parent:hover $child" {
        ...
    }
}```
without succeed

As I check with the console log, the key "parent:hover child" is in the rule list but the style is not applied.
With single selector like "p", it works well