Element:hover doesn't affect child

Question

I'm coding a website for my learning path and I got following issue:
When I Hover &__item, the animation property doesn't appears in style of &__selection...

sass code:

&__item {
  /*...*/

  __selection{
    /*...*/
  }

  &:hover &__selection {
    animation: animSelect 800ms ease-in-out 0ms 1;
  }
}

Answer 1

You are using the BEM naming convention, to target the __selection class there are a couple of ways you can do it, this stackoverflow answer also covers this issue very well, for now these are my guess

&__item {
  /*...*/

  __selection{
    /*...*/
  }

  &:hover __selection { //more of a normal css solution

    animation: animSelect 800ms ease-in-out 0ms 1;

  }
}

or

.item{ 

    &__selection {
         /*...*/
    }

    &:hover & {
        &__selection  {
             /*...*/
        }   
    }
}