Change pseudo-element style based on grandparent class

Question

Consider the following scss:

.link {
  ....

  span {
    .... 

    &:after {
      ....

      .link.active & {
        background-color: red;
      }

      .link:hover & {
        background-color: red;
      }

I want to change the background-color for the span :after pseudo-element when link is either being hovered or has the .active class.

What I've tried ( the code posted above ) doesnt seem to work.

Is there anything I'm missing ?

score 4 · Answer 1 · answered Oct 01 '18 at 13:05

4

you should try it like this scheme :

.link {
  span {
    &:after {
     ...
    }
  }
  &.active,
  &:hover {
    span:after {
      background-color: red;
    }
  }
}

Working example : http://jsfiddle.net/92gqap5y/

answered Oct 01 '18 at 13:05

André DS

1,521
1
11
23

score -1 · Answer 2 · answered Oct 01 '18 at 13:05

-1

This question seems to be asked often, as mentioned in this thread.

They increase the size of the link element to be as large as the span. Though I would recommend moving the :hover selector and .active class to the span element directly.

answered Oct 01 '18 at 13:05

WayneDenier

327
1
4

Change pseudo-element style based on grandparent class

2 Answers2