JavaScript's getElementsByTagName() function is called to return the appropriate elements when this expression is used.

Each ID value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. However, this behavior should not be relied on. A document with more than one element using the same ID is invalid.

In our second example, it might not be immediately clear why someone might want to specify a tag name associated with a particular ID, as that id value needs to be unique anyway. However, some situations in which parts of the DOM are user-generated may require a more specific expression to avoid false positives. Furthermore, when the same script is run on more than one page, it might be necessary to identify the element ID as the pages could be associating the same ID with different elements. For example, page A might have <h1 id="title"> while page B has <h2 id="title">.

For ID selectors such as the preceding examples, jQuery uses the JavaScript function getElementById(), which is extremely efficient. When another selector is attached to the ID selector, like in the second example, jQuery performs an additional check before identifying the element as a match.

For class selectors, jQuery uses JavaScript's native getElementsByClassName() function if the browser supports it. Otherwise, it checks the .className attribute of each element.

As a CSS selector (for example, in a stylesheet), the multiple-class syntax used in the third example is supported by all modern web browsers, but not by Internet Explorer versions 6 and below. This makes the syntax especially handy for applying styles cross-browser through jQuery.

Descendants of an element are that element's children, grandchildren, great-grandchildren, and so on. For example, in the following HTML code, the <img> element is a descendant of the <span>, <p>, <div id="inner">, and <div id="container"> elements:

<div id="container">
  <div id="inner">
    <p>
      <span><img src="example.jpg" alt="" /></span>
    </p>
  </div>
</div>

As a CSS selector, the child combinator is supported by all modern web browsers including Safari, Mozilla/Firefox, Opera, Chrome, and Internet Explorer 7 and above; but notably not by Internet Explorer versions 6 and below. The first example is a handy way of selecting all nested unordered lists (that is, except the top level), and jQuery makes it possible to do this in a cross-browser fashion.

The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants. Therefore, in the following HTML code, the <img> element is a child only of the <span> element:

<div id="container">
  <div id="inner">
    <p>
      <span><img src="example.jpg" alt="" /></span>
    </p>
  </div>
</div>

One important point to consider with both the adjacent sibling combinator (E + F) and the general sibling combinator (E ~ F, covered next) is that they only select siblings. Consider the following HTML code:

<div id="container">
  <ul>
    <li></li>
    <li></li>
  </ul>
  <p>
    <img/>
  </p>
</div>

One important point to consider with both the adjacent sibling combinator (E + F) and the general sibling combinator (E ~ F) is that they only select siblings. The notable difference between the two is their respective reach. While the former reaches only to the immediately following sibling element, the latter extends that reach to all of the following sibling elements.

Consider the following HTML code:

<ul>
  <li class="first"></li>
  <li class="second"></li>
  <li class="third></li>
</ul>
<ul>
  <li class="fourth"></li>
  <li class="fifth"></li>
  <li class="sixth"></li>
</ul>

This multiple expression combinator is an efficient way to select disparate elements. An alternative to this combinator is the .add() method described in Chapter 3, DOM Traversal Methods.

As jQuery's implementation of :nth-child(n) is strictly derived from the CSS specification, the value of n is "1-based," meaning that the counting starts at 1. However, for all other selector expressions, jQuery follows JavaScript's "0-based" counting. Therefore, given a single <ul> containing two <li>s, $('li:nth-child(1)') selects the first <li> while $('li:eq(1)') selects the second.

As the two look so similar, the :nth-child(n) pseudo-class is easily confused with :nth(n), a synonym for :eq(n). However, as we have just seen, the two can result in dramatically different matched elements. With :nth-child(n), all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :nth(n), only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the nth one is selected. To demonstrate this distinction, let's examine the results of a few selector expressions given the following HTML code:

<div>
  <h2></h2>
  <p></p>
  <h2></h2>
  <p></p>
  <p></p>
</div>

In addition to taking an integer, :nth-child(n) can take even or odd. This makes it especially useful for table-row striping solutions when more than one table appears in a document. Again, given the preceding HTML snippet:

The third example selector illustrates the most complicated usage of :nth-child(). When a simple mathematical expression of the form an+b is provided with integers substituted for a and b, :nth-child() selects the elements whose positions in the list of children are equal to an+b for some integer value of n.

Further description of this unusual usage can be found in the W3C CSS specification at http://www.w3.org/TR/css3-selectors/#nth-child-pseudo.

The :first-child pseudo-class is shorthand for :nth-child(1). For more information on :X-child pseudo-classes, see the Description for the Numbered child selector.

For more information on :X-child pseudo-classes, see the Description for the Numbered child selector.

One important thing to note with :empty (and :parent) is that child elements include text nodes.

The W3C recommends that the <p> element should have at least one child node, even if that child is merely text (see http://www.w3.org/TR/html401/struct/text.html#edef-P). On the other hand, some other elements are empty (that is, have no children) by definition; for example, <input>, <img>, <br>, and <hr>.

The universal selector is especially useful when combined with other expressions to form a more specific selector expression.