html - :first-child and :last-child applies to all elemments -

i'm having strange problem :first-child , :last-child selectors. when apply submenu link applies submenu links. need create differente effect on first , last links in submenu.

this html:

<nav id="menu">     <ul>         <li><a href="#">1</a></li>         <li><a href="#">2</a></li>         <li>             <a href="#">3</a>             <ul>                 <li><a href="#">sub1</a></li>                 <li><a href="#">sub2</a></li>                 <li><a href="#">sub3</a></li>                 <li><a href="#">sub4</a></li>             </ul>         </li>         <li><a href="#">4</a></li></li>     </ul> </nav> 

this css:

nav#menu{ width:100%; text-align:center; z-index:999; } nav#menu li{ display:inline-block; } nav#menu li.voltar{ display:none; } nav#menu a{ display:block; padding:0.75rem 1.3rem; font-size:0.7rem; } nav#menu li:hover a{ background:#00afef; color:#fff; } nav#menu li ul{ display:none; } nav#menu li:hover ul{ display:block; position:absolute; width:12rem; } nav#menu li ul li{ display:block; } nav#menu li ul li a{ border-bottom:#0098df solid 1px; } nav#menu li ul li:hover a{ background:#0064ba; } 

i tried

nav#menu li ul li a:first-child{ color:red; } nav#menu li ul li a:last-child{ color:blue; } 

but applied all. =/

a doesn't have child, li does, apply there.

remember :last-child does:

the :last-child selector allows target last element directly inside containing element.

a in case isn't containing element.

so nav#menu li ul li:first-child { color:red; } makes more sense.

http://jsfiddle.net/4lefkxog/