Почему в sass не срабатывает hover на дочерний элемент?

Question

[Stepan007]

Почему в sass не срабатывает hover на дочерний элемент
https://jsfiddle.net/oqd45263/
Так работает, но меняет у блока

.author__info
  cursor: pointer

  &:hover
    border: 2px solid red

А при попытке сделать у дочернего элемента изменение стилей, не меняет

.author__info
  cursor: pointer

  &:hover > .author__name
    border: 2px solid red

Comments

[Антон Литвиненко]

в песочницу. не хватает данных

[Stepan007]

Антон Литвиненко, https://jsfiddle.net/oqd45263/

[Антон Литвиненко]

Stepan007, у вас стоит > означает прямого потомка. уберите ее

Answer 1

[Mesuti]

Comments

[Stepan007]

https://jsfiddle.net/oqd45263/

[Mesuti]

Stepan007, поравил.
> означает действие только на прямых потомков.
В Вашем случае была дополнительная вложенность

[Stepan007]

А если у .author__name есть ещё before
Как нам к нему применить стили по такому же принципу
&:hover .author__name

Так не сработало

&:hover .author__name:after
    color: red

[Mesuti]

Stepan007, добавил after

[Mesuti]

добавил &:hover .author__name:after

Возможно, лишний пробел поставили, поэтому не срабатывало

Answer 2

[Сергей delphinpro]

Вы знаете, что означает знак ">" в селекторе? Загуглите. И ваша проблема решится

Если лень гуглить

&:hover .author__name
    border: 2px solid red

или

&:hover > .author__about > .author__name
    border: 2px solid red

А вообще, раз уж по БЭМ

.author {
  &__info { … }
  &__info:hover &__name { … }
}

Comments

[Stepan007]

Спасибо

[Stepan007]

А если у .author__name есть ещё before
Как нам к нему применить стили по такому же принципу
&:hover .author__name

Так не сработало

&:hover .author__name:after
    color: red

[Сергей delphinpro]

Stepan007, ну наверное не сработало потому что вы говорите про before, а пишете after?

Answer 3

[Роман]

Знак > - означает наследование от родителя.
Родителем для author__name является author__about, а не author__info

Comments

[Stepan007]

А если у .author__name есть ещё before
Как нам к нему применить стили по такому же принципу
&:hover .author__name

Так не сработало

&:hover .author__name:after
    color: red

[Роман]

Stepan007, если есть before, то зачем применять стили для after?

.author__info
  display: flex
  cursor: pointer
  background-color: coral

  .author__name::after
    content: 'after'
  &:hover .author__name
    border: 2px solid red
    &::after
      color: red
    
.author__name
  position: relative
  font-size: 21px