[jQuery] Affecting last link in *top level* of unordered list
Hi,
I'm trying this:
$(document).ready(function() {
// Hide first list item
$("#header ul li:first").addClass("first");
// Hide last list item
$("#header ul li:last").addClass("last");
});
On the following unordered list (below), but the class is appearing on
the last *nested* list item, not the last item I want (link P7). Does
anyone know how I can target this with my selector?
Thanks,
osu
<ul class="nav">
<li class="nav-path-selected FIRST">
<a href="/" class="nav-path-selected">P1</a>
</li>
<li>
<a href="/#">P2</a>
</li>
<li class="nav-path-selected">
<a href="/#" class="nav-path-selected">P3</a>
<ul>
<li class="nav-selected nav-path-selected">
<a href="/#" class="nav-selected nav-path-selected">P3a</a>
</li>
<li class="nav-selected nav-path-selected">
<a href="/#" class="nav-selected nav-path-selected">P3b</a>
</li>
<li class="nav-selected nav-path-selected">
<a href="/#" class="nav-selected nav-path-selected">P3c</a>
</li>
<li class="nav-selected nav-path-selected LAST">
<a href="/#" class="nav-selected nav-path-selected">P3d</a>
</li>
</ul>
</li>
<li>
<a href="/#">P4</a>
</li>
<li>
<a href="/#">P5</a>
</li>
<li>
<a href="/#">P6</a>
</li>
<li>
<a href="/#">P7</a>
</li>
</ul>