title: CSS hover selector not working
body: <p>I'm encountering a strange css issue.</p>
  
  <p>It's possibly because I don't use classes, but names of tags directly, but I want to learn what the problem is, so that I don't repeat it.</p>
  
  <p>my HTML is like this:</p>
  
  <pre><code>&lt;div class='container'&gt;
      &lt;div class='top'&gt;
          &lt;a href='href.com'&gt;hover here..&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class='bottom'&gt;
          &lt;a&gt;..and this should change&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and what I tried with CSS:</p>
  
  <pre><code>.top a:hover .bottom a
  {
      color:#f00; /* does not work */
  }
  .top a:hover .container
  {
      background-color:#f00; /* does not work */
  }
  .top a:hover
  {
      color:#f00; /* works */
  }
  </code></pre>
  
  <p>So why the calls on other elements are not working?</p>
  
  <p>Or is it because I'm calling parent from child? </p>
  
  <p>If so, how can I make it work?</p>
  
  <p>Thanks !</p>