title: How can I append to the class name when my selector has a pseudo class?
body: <p>So I write my css trough sass (scss). I use the ampersand mark (&amp;) 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?</p>
  
  <p>To be clear: I want to target the children by their class, not by their element (eg: span).</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="container__inner"&gt;
         &lt;p class="container__inner__paragraph"&gt;
         foo to the
         &lt;span class="container__inner__paragraph__highlight"&gt;
         bar
        &lt;/span&gt;
        &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>.container{
    &amp;__inner{
      &amp;__paragraph{
        color: yellow;
        background: black;
  
        &amp;: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
          &amp;__highlight{
            color: green;
          }
        }
  
        &amp;__highlight{
          text-transform: uppercase;
          font-weight: 700;
        }
      }
    }
  }
  </code></pre>
  
  <p>A codepen that hopefully explains my struggle:</p>
  
  <p><a href="http://codepen.io/anon/pen/GZqGPq" rel="nofollow">http://codepen.io/anon/pen/GZqGPq</a></p>