悬停时仅在CSS中选择第一个孩子

Question

so here is my code:

ul.primary li:hover > a{
    transform:translate(7px,7px);
    -ms-transform:translate(7px,7px);
    -webkit-transform:translate(7px,7px);
} 

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:

ul.sub li a:hover {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}

the transition is still there.

here is the html of the menu:

<div class="wrap">
<span class="decor"></span>
<nav>
  <ul class="primary">
    <li>
      <a href="">WORKS</a>
      <ul class="sub">
        <li><a href="">CERAMICS</a></li>
        <li><a href="">EXHIBITIONS</a></li>
        <li><a href="">OTHERWORKS</a></li>
      </ul>
    </li>
    <li>
      <a href="">PHOTOS</a>
    </li>
    <li>
      <a href="">OTHER PROJECTS</a>
      <ul class="sub">
        <li><a href="">INSTAGRAM FEED</a></li>
        <li><a href="">PUBLICATIONS</a></li>
        <li><a href="">WARDOBE DESIGN</a></li>
      </ul>  
    </li>
  </ul>
</nav>
</div>

Answer 1

solved mmy problem:

ul.primary > li:hover > a

was the correct selector.

Answer 2

You need ul.primary li:first-child:hover > a and

ul.sub li:hover a {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
}