title: Change another div on hover which is not sibling nor child
body: <p>My HTML code is similar to this :</p>
  
  <p></p>
  
  <pre><code>&lt;div class="navbar"&gt;
      &lt;div class="btn-section btn-1"&gt;
          &lt;p class="section pro"&gt;...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="navbar"&gt;
      &lt;div class="btn-section btn-2"&gt;
          &lt;p class="section notpro"&gt;...&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I'm using this in my CSS code :</p>
  
  <pre><code>.btn-1:hover {
      .pro {
          ...
      }
  }
  </code></pre>
  
  <p>It works perfectly. </p>
  
  <p>What I want to do now is to modify my .notpro class inside the btn-1:hover. As .notpro is not child or sibling with btn-1, it doesn't work.</p>
  
  <pre><code>.btn-1:hover {
      .pro {
          ... // works
      }
      .notpro {
          ... // doesn't work
      }
  }
  </code></pre>
  
  <p>Is there a way to do this ?</p>
  
  <p>Thank you !</p>