nested lists - How to select first a element of li with CSS? -

i'm trying select first anchor tag of nested li menu tree:

<div class="footermenu"> <ul class="menu">     <li class="expanded first">         <a href="link.html">first menupoint</a>         <ul class="menu">             <li class="first"><a href="#">first submenupoint</a></li>             <li><a href="#">second submenupoint</a></li>             <li><a href="#">third submenupoint</a></li>             <li class="last"><a href="#">fourth submenupoint</a></li>         </ul>     </li>     <li class="expanded last">         <a href="link.html">second menupoint</a>         <ul class="menu">             <li class="first"><a href="#">first submenupoint</a></li>             <li><a href="#">second submenupoint</a></li>             <li><a href="#">third submenupoint</a></li>             <li class="last"><a href="#">fourth submenupoint</a></li>         </ul>     </li> </ul> 

what i'm trying accomplish select first anchor tag of main menupoints.

my css is:

div.footermenu li.expanded a:first-child {     font-weight: bold;     } 

the problem css still selects submenupoints , don't know why.

you want use div.footermenu li.expanded > a:first-child

jsfiddle

http://jsfiddle.net/ertv6/

div.footermenu li.expanded > a:first-child {     font-weight: bold;     } 

your original selector select anchor elements first-children of li.expanded, adding direct descendant selector, >, specify want select first, direct descendant of li.expanded anchors.