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>

Reply via email to