Custom selectors

Custom Selectors
To the wide variety of CSS and XPath selectors, jQuery adds its own custom selectors.
Most of the custom selectors allow us to pick certain elements out of a line-up, so to
speak. The syntax is the same as the CSS pseudo-class syntax, where the selector starts
with a colon (:). For example, if we wanted to select the second item from a matched
set of divs with a class of horizontal, we would write it like this:
   

 $('div.horizontal:eq(1)')

Note that the eq(1) gets the second item from the set because JavaScript array
numbering is zero-based, meaning that it starts with 0. In contrast, CSS is one-based,
so a CSS selector such as $('div:nth-child(1)') gets any div that is the first child
of its parent.
Styling Alternate Rows
Two very useful custom selectors in the jQuery library aredd and :even.

.odd {
  background-color: #ffc; /* pale yellow for odd rows */
}
.even {
  background-color: #cef; /* pale blue for even rows */
}

$(document).ready(function() {
  $('tr:odd').addClass('odd');
  $('tr:even').addClass('even');
});