How do you style child element with Aphrodite based on parent's pseudo state?

[Dajust]

@kentcdodds Great work on Aphrodite! I'm totally sold to Aphrodite by the ability to

"Supports pseudo-selectors like :hover, :active, etc. without needing to store hover or active state in components."

I often style my child element based on the parent's pseudo state? For example, to display say a "Delete" button that was hidden on a given item. I usually do...

Using pure CSS:

.myItem:hover .delete-button {
  display: inline-block;
}

Or SASS

.myItem{
  &:hover{
   .delete-button{
      display: inline-block;
   }
  }
}

So when you hover over .myItem the .delete-btton shows up. Please, Is there a way to accomplish similar stuff on Aphrodite?

Thanks again for Aphrodite!

BTW. I'm just arriving to the SPA world using React as landing point. Any other styling tips would be more than welcomed.

[kentcdodds]

Hi @Dajust!
Thanks for your question. First, just to be clear, I didn't create aphrodite and I'm not a part of Khan Academy. I'm just a happy user of the library :-)

As for your question, it's actually a known issue that's got an interesting workaround and is being worked on.

I hope that's helpful! Also, welcome to the wonderful world of SPAs!