title: how do i modify the control nav in Nivo Slider with jquery?
body: <p>I'm trying to customize Nivo slider. I've added these styles to Nivo slider. That way, the control <code>nav</code> becomes squares.</p>
  
  <pre><code>.nivo-control {
      background-color:#eecd0d;
      height:19px;
      width:19px;
      margin-left:5px;
      float:left;
      text-indent:-9999px;
      text-decoration:none;
  }
  </code></pre>
  
  <p>That works fine and makes all the numbers appear like squares. Now what i'm trying to do is make each square (there will always be four) a different color. What i did was create 3 different classes (the first color is defined by nivo-control). here's what that looks like:</p>
  
  <pre><code>.second_li {
      background-color:#ab62bc;
  }
  
  .third_li {
      background-color:#c491d0;
  }
  
  .fourth_li {
      background-color:#d6b2de;
  }
  </code></pre>
  
  <p>The problem seems to lie with the jQuery code. I am using <code>addClass</code> to dynamically add the styles to the controls, but it doesn't seem to be working.</p>
  
  <pre><code>$(function(){
      $(".nivo-controlNav a:nth-child(2)").addClass('second_li);
      $(".nivo-controlNav a:nth-child(3)").addClass('third_li);
      $(".nivo-controlNav a:nth-child(4)").addClass('fourth_li);
  });
  </code></pre>