Difference between: nth-child (even) and: even in jquery

Question

:nth-child(even) and :even in jquery look similar, but select different elements. Please let me know about the differences.

Happy coding ...

Answer 1

Here is an example illustrating the difference:

http://jsfiddle.net/bEfT6/

:even matches every 2nd element in the set of elements that you select. Where as :nth-child(even) matches any elements that are an even child of their respective parent.

So, in the example, you see that two selectors act on different elements. Elements with red text correspond to the selected class and are even children of the parent div. Lines with a blue background correspond to the selected class and even within this choice.

So:

 .something:nth-child(odd) 

corresponds to each element with the class something , which is its even parent.

 .something:even 

matches any other element with the class something . (regardless of the attitude towards his brothers and sisters)

Answer 2

:even - 0, and :nth-child - 1. This is from the docs for :even

In particular, note that indexing based on 0 means intuitively: even selects the first element, third element, etc. within the agreed set.

This is for :nth-child

Because the jQuery: nth-child (n) implementation is strictly inferred from the CSS specification, the value of n is “1-indexed,” which means that the count starts at 1. However, all other jQuery selector expressions follow the JavaScript “0-indexed” count.