CODEWITHSUNDEEP
htmlcss
mpn
mpn

Reputation: 1018

select only first child in css when hovering

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>

Upvotes: 0

Views: 2196

Answers (2)

mpn
mpn

Reputation: 1018

solved mmy problem:

ul.primary > li:hover > a

was the correct selector.

Upvotes: 1

Morpheus
Morpheus

Reputation: 9065

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;
}

Upvotes: 0

Related Questions