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 are :odd and :even. Let’s take a look at how we can use these selectors for basic table striping, given the following table:

<table>
<tr>
  <td>As You Like It</td>
  <td>Comedy...