title: select only first child in css when hovering
body: <p>so here is my code:</p>
  
  <pre><code>ul.primary li:hover &gt; a{
      transform:translate(7px,7px);
      -ms-transform:translate(7px,7px);
      -webkit-transform:translate(7px,7px);
  } 
  </code></pre>
  
  <p>I want to select only the first "a" tag. Its for a menu and i dont want the links in the next "ul li a" to be translated 7 px down and right. For some reason when i try to change the css of the sub menu to: </p>
  
  <pre><code>ul.sub li a:hover {
      -moz-transition: none;
      -webkit-transition: none;
      -o-transition: color 0 ease-in;
      transition: none;
  }
  </code></pre>
  
  <p>the transition is still there. </p>
  
  <p>here is the html of the menu:</p>
  
  <pre><code>&lt;div class="wrap"&gt;
  &lt;span class="decor"&gt;&lt;/span&gt;
  &lt;nav&gt;
    &lt;ul class="primary"&gt;
      &lt;li&gt;
        &lt;a href=""&gt;WORKS&lt;/a&gt;
        &lt;ul class="sub"&gt;
          &lt;li&gt;&lt;a href=""&gt;CERAMICS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;EXHIBITIONS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;OTHERWORKS&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=""&gt;PHOTOS&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href=""&gt;OTHER PROJECTS&lt;/a&gt;
        &lt;ul class="sub"&gt;
          &lt;li&gt;&lt;a href=""&gt;INSTAGRAM FEED&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;PUBLICATIONS&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;WARDOBE DESIGN&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;  
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>