:first-child and :last-child applies to all elements

Question

I'm having a strange problem with :first-child and :last-child selectors. When I apply it to a submenu link it applies to all submenu links. I just need to create a different effect on first and last links in the submenu.

This is the 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 is the 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 it applied to all. =/

Answer 1

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

Remember what :last-child does:

The :last-child selector allows you to target the last element directly inside its containing element.

a in your case isn't the containing element.

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

http://jsfiddle.net/4Lefkxog/