Question

looking for some help please with the JQuery CSS selector. I want to identify the first and last LI from the main UL list and alter the CSS class. The first should be
class="grid_4 alpha"
and the last
class="grid_4 omega"

<ul>
    <li id="linkcat-2" class="grid_4 this should be alpha"><h4 class="widgettitle">Blogroll</h4>
     <ul class='xoxo blogroll'>
      <li><a href="http://wordpress.com/">WordPress.com</a></li>
      <li><a href="http://wordpress.org/">WordPress.org</a></li>
     </ul>
</li>
<li id="linkcat-2" class="grid_4"><h4 class="widgettitle">Blogroll</h4>
 <ul class='xoxo blogroll'>
  <li><a href="http://wordpress.com/">WordPress.com</a></li>
  <li><a href="http://wordpress.org/">WordPress.org</a></li>
 </ul>
</li>
<li id="linkcat-2" class="grid_4"><h4 class="widgettitle">Blogroll</h4>
 <ul class='xoxo blogroll'>
  <li><a href="http://wordpress.com/">WordPress.com</a></li>
  <li><a href="http://wordpress.org/">WordPress.org</a></li>
 </ul>
</li>
<li id="linkcat-2" class="grid_4 this should be omega"><h4 class="widgettitle">Blogroll</h4>
 <ul class='xoxo blogroll'>
  <li><a href="http://wordpress.com/">WordPress.com</a></li>
  <li><a href="http://wordpress.org/">WordPress.org</a></li>
 </ul>
</li>
</ul>

I just cannot get the right JQuery.css functio to work.

Help much appreciated – I can add an id to the master ul if requyired

Answer 1

Use :first-child and :last-child with the child (>) selector:

$("#master > :first-child").addClass("grid_4 alpha");
$("#master > :last-child").addClass("grid_4 omega");

Bear in mind that classes can’t have spaces in them. This markup:

<li class="grid_4 alpha">...

defines a list element that has two classes. If you want to select it you can use:

$("li.grid_4.alpha")...

meaning select all the list elements that have both the grid_4 and alpha classes.