title: How to only target the ul li:nth-child(2) in jQuery
body: <p>I am trying to make only the <code>li:nth-child(2)</code> width animate from <code>230px</code> to <code>780px</code>.</p>
  
  <p>I have done this, but now whenever there is a <code>li</code> within this section it then gives the <code>nth-child(3)</code> that width of <code>780px</code> also.</p>
  
  <p>How do I only affect the width of the one element I am trying to?</p>
  
  <p><strong>JS :</strong></p>
  
  <pre><code>$(document).ready(function(){
      $("#getsocial").live('click', function(){
          $(".homepage li:nth-child(1)").fadeOut(1000);
          $(".homepage li:nth-child(3)").fadeOut(1000);
          $(".homepage ul &gt; li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
          $(".socialshare").hide().delay(2400).fadeIn(1000);
          $(".goback").hide().delay(2400).fadeIn(1000);
      });
  });
  </code></pre>
  
  <p>I have also tried this:</p>
  
  <pre><code>$(document).ready(function(){
      $("#getsocial").live('click', function(){
          $(".homepage li:nth-child(1)").fadeOut(1000);
          $(".homepage li:nth-child(3)").fadeOut(1000);
          $(".homepage li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
          $(".socialshare").hide().delay(2400).fadeIn(1000);
          $(".goback").hide().delay(2400).fadeIn(1000);
      });
  });
  </code></pre>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;div class="homepage"&gt;
    &lt;ul&gt;
      &lt;li&gt;content here&lt;/li&gt;
      &lt;li&gt;
        &lt;ul&gt;
          &lt;li&gt;content here&lt;/li&gt;
          &lt;li&gt;content here&lt;/li&gt;
          &lt;li&gt;content here&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;content here&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for the help given :)</p>