title: LESS, can hover code be written differently?
body: <p>I have been working on LESS for quite some time and am quite familiar with it. But I have been fiddling around to see the extent of what LESS can do. </p>
  
  <pre><code>.col-three{
    padding: 20px 0;
    height: 640px;
  
    aside{
      height: 100%;
      background-position: center;
      background-repeat: no-repeat; 
      background-size: cover;
      position: relative;
  
      .text{
        .fsize(43px);
        color: @white;
        .bold;
        .uppercase;
        position: absolute;
        top:50%; 
        left: 50%;
        .centerposition;
        word-spacing: 9999999px;
        .alcenter;
  
        span {
          background: rgba(184,181,175,0.8);
          line-height: 140%;
          .transition();
        }
      }
    }
  
    &amp;:nth-child(2){
      padding: 0;
  
      aside {
        .text {
          .fsize(62px);
          width: 100%;
        }
      }
    }
  
    &amp;:hover{
      aside &gt; .text &gt; span {
        color:@black
      }
    }
  }
  </code></pre>
  
  <p>The above code works perfectly fine, what it does is when I hover to the <code>.col-three</code> the <code>span</code> inside the <code>.text</code> changes color to black. Works Perfectly fine. But my question is however is it possible to write this code </p>
  
  <pre><code>  &amp;:hover{
      aside &gt; .text &gt; span {color:@black}
    }
  </code></pre>
  
  <p>in any different way so that I don't have to point to all the child elements of <code>.col-three</code> to reach the <code>span</code>.</p>
  
  <p>Thanks in advance.</p>