elclanrs elclanrs - 6 months ago 15
CSS Question

Parent parent selector nested in stylus

I'm trying to get the parent selector in Stylus when it is nested inside a pseudo-selector. So while I can do

&-image
in the first nesting, I can't seem to get it working inside the
&:hover


.post-news
&-image
display: none
&:hover
&-image // this isn't working
display: block


I understand why it is not working because the
&
doesn't refer to
.post-news
anymore. I tried the selectors listed here http://stylus-lang.com/docs/selectors.html such as:

../-image
/-image
^[0]-image


But I couldn't get it working so far; I'm not sure which one I need. What am I missing?

Answer

As per my understanding, the final selector that you are looking for is .post-news:hover .post-news-image and if that is correct, you can do it like in the below snippet.

.post-news
  &-image
    display: none
  &:hover
    & ^[0]-image
      display: block

When it comes to Stylus, I am a beginner myself but as per my understanding the reason why ^[0]-image and ../-image doesn't work as expected is because the Stylus compiler treats them as some sort of a move one level up command and so it effectively becomes the same as the &-image which is directly under .post-news. Because of this, the normal nesting behavior (which is, for the .post-news:hover to be added in front of the nested selector) is not happening. Adding a & explicitly seems to address this.

Comments