Question

Hi i want to apply style on every 2nd <li>

i have tried

<script>
$(document).ready(function(){
$('#cl li:nth-child(2)').css('color', 'red');    
})
</script>

Html

<ul id="cl">
  <li>home</li>
  <li>home2</li>
  <li>home3</li>
  <li>home4</li>
  <li>home5</li>
  <li>home6</li>
</ul>

i can apply style on only 2nd child by using this code . how can i apply style on every second child

Thanks in advance
🙂

Answer 1

Using :odd selector:

$('#cl li:odd').css('color', 'red');

http://api.jquery.com/odd-selector/

Here’s Jsfiddle:

http://jsfiddle.net/uKX3t/1/

The reason you need to use :odd as opposed to :even is because the children is 0-indexed, meaning that <li>home</li> is the 0th child and <li>home2</li> is the first child which is odd.

Quote from the docs:

In particular, note that the 0-based indexing means that,
counter-intuitively, :odd selects the second element, fourth element,
and so on within the matched set.

So oddly, you need to use odd selector (pun intended)