Question

I’m using this code to add class for list items:

jQuery('#news ul > li:first-child').addClass('first');
jQuery('#news ul > li:last-child').addClass('last');

It’s working very well. The problem is when I have only one item…the code is adding the two classes for the same li.

Example:

1. Works perfectly if exist two or more items:

   <div id="nav">
   <ul>
   <li class="first">Item 1</li>
   <li class="last">Item 2</li>
   </ul>
   </div>
   

2. Add the two classes for the unique item:

   <div id="nav">
   <ul>
   <li class="first last">Item 1</li>
   </ul>
   </div>
   

Is there a way to disable .last class if is only one item?

Thanks!

Answer 1

Take a look at the :only-child selector:

$('#news ul > li:last').not(':only-child').addClass('last');