CODEWITHSUNDEEP
sass
Warre Buysse
Warre Buysse

Reputation: 1345

How can I append to the class name when my selector has a pseudo class?

So I write my css trough sass (scss). I use the ampersand mark (&) to target children. However, when I'm doing a hover state of a certain element I cannot the children anymore. Is there a way to do this?

To be clear: I want to target the children by their class, not by their element (eg: span).

HTML:

<div class="container">
    <div class="container__inner">
       <p class="container__inner__paragraph">
       foo to the
       <span class="container__inner__paragraph__highlight">
       bar
      </span>
      </p>
    </div>
</div>

SCSS

.container{
  &__inner{
    &__paragraph{
      color: yellow;
      background: black;

      &:hover{
        background: rgba(0,0,0, .3);

        // This obviously works
        span{
          color: green;
        }

        // This obviously works too
        .container__inner__paragraph__higlight{
          color: green;
        }

        // This however doesn't work
        &__highlight{
          color: green;
        }
      }

      &__highlight{
        text-transform: uppercase;
        font-weight: 700;
      }
    }
  }
}

A codepen that hopefully explains my struggle:

http://codepen.io/anon/pen/GZqGPq

Upvotes: 0

Views: 7491

Answers (4)

Warre Buysse
Warre Buysse

Reputation: 1345

Thanks to @simey.me I found the proper solution. If you add an ampersand (&-mark) behind the &:hover you can target children classes in the ampersand way.

Codepen for the lovers! http://codepen.io/anon/pen/GZqGPq

The scss:

.container{
  &__inner{
    &__paragraph{
      color: yellow;
      background: black;
      display: inline-block;
      padding: 4rem;

      &:hover &{
        &__highlight{
          color: green;  
        }
      }

      &__highlight{
        text-transform: uppercase;
        font-weight: 700;
      }
    }
  }
}

Upvotes: 1

Peter Thomas Simmons
Peter Thomas Simmons

Reputation: 1

Try this if you need to style the highlight class when you hover on the paragraph tag:

.highlight & {color: blue;}

Upvotes: 0

simey.me
simey.me

Reputation: 2217

You can try this way:

.container__inner__paragraph {
  &:hover &__highlight {
    background: red!important;
  }
}

But I'm not 100% sure what you want?

Upvotes: 3

drosam
drosam

Reputation: 2896

You can use the class name as you are doing right now, your code is correct, you only have a typo error, in your scss you have .container__inner__paragraph__higlight but the correct class name is .container__inner__paragraph__highlight

http://codepen.io/anon/pen/yOJEdE

Upvotes: 0

Related Questions