Nested components and how to handle interactive states (pseudo class) about rscss

I would do this with CSS:

.user-profile:hover {
    .user-details > .name,
    .user-image > .image {
        // ...
    }
}

Edit: I adjusted the code a little bit, I forgot you mentioned that the styles would be applied to both elements.

[rstacruz]

Unfortunately this is one of the edge cases that RSCSS falls short of. .user- details { .user-profile:hover & { .. } } (or the variant James mentioned)
seems like a pretty good workaround.![](https://link.nylas.com/open/45iu4p1xsz
s6wds5wnj30hzg1/local-54369243-aff4?r=cmVwbHkrMDAwMTIyOTE2MzZlOTFlY2RiMGQ0MjA0
MzYwYzA2MDgzYjcwZWExYjliMGNmOTBhOTJjZjAwMDAwMDAxMTNjMDcxZjQ5MmExNjljZTBhMjExOD
M1QHJlcGx5LmdpdGh1Yi5jb20=)

On Aug 9 2016, at 12:14 am, James Kolce [email protected] wrote:

I would do this with CSS:

.user-profile:hover {
.user-details > .name {
// ...
}

.user-image > .image {

    // ...

}

}

I think that's the minimum amount of code you can use without falling into
ambiguities.

You are receiving this because you are subscribed to this thread.
Reply to this email directly, [view it on GitHub](https://github.com/rstacruz/
rscss/issues/49#issuecomment-238287876&r=cmVwbHkrMDAwMTIyOTE2MzZlOTFlY2RiMGQ0M
jA0MzYwYzA2MDgzYjcwZWExYjliMGNmOTBhOTJjZjAwMDAwMDAxMTNjMDcxZjQ5MmExNjljZTBhMjE
xODM1QHJlcGx5LmdpdGh1Yi5jb20=), or [mute the
thread](https://github.com/notifications/unsubscribe-auth/AAEikZ3XSTyVQ0EzEQPI
_qEJHqzo_Yr_ks5qd1X0gaJpZM4JfHjq&r=cmVwbHkrMDAwMTIyOTE2MzZlOTFlY2RiMGQ0MjA0MzY
wYzA2MDgzYjcwZWExYjliMGNmOTBhOTJjZjAwMDAwMDAxMTNjMDcxZjQ5MmExNjljZTBhMjExODM1Q
HJlcGx5LmdpdGh1Yi5jb20=).![](https://github.com/notifications/beacon
/AAEikVLvKLBBdUAY2jyHc3iKqK-9GA6vks5qd1X0gaJpZM4JfHjq.gif)

[mzdr]

Thanks for your replies!

Rico, I think you're right. It actually is rather an edge case but it's quite an interesting though. I spent some time thinking about it and what do you guys think about that:

Maybe you could see it as something like a variant – strictly seen it actually is – but only for interactive states or as a kind of glue. Right now I'm abusing the component pattern just for having a class/identifier to style other nested components. Maybe this could also be something that could reside in the helpers section?

Something like ._hover & > .name { } ? Since I don't actually care what's the name of the glue that is connecting the nested components it could be just another helper class. But there might be another edge case where this could cause conflicts if you are in a nesting hell.

Nevertheless this is something that shouldn't occur on purpose and should actually be avoided if you stick to RCSS and think twice about your components!

Doesn't it?