jQuery in Action
Selecting elements for manipulation
21
<li>Custom selectors</li>
<li>Form selectors</li>
</ul>
</li>
</ul>
Suppose we want to select the link to the remote jQuery site, but not the links to
various local pages describing the different
various local pages describing the different
CSS
specifications. Using basic
CSS
selectors, we might try something like
ul.myList
li
a
. Unfortunately, that selector
would grab all links because they all descend from a list element.
You can verify this by entering the selector
ul.myList
li
a
into the Selectors
Lab and clicking Apply. The results will be as shown in figure 2.3.
A more advanced approach is to use child selectors, in which a parent and its
direct child are separated by the right angle bracket character (>), as in
p > a
This selector matches only links that are direct children of a
<p>
element. If a link
were further embedded, say within a
<span>
within the
<p>
, that link would not
be selected.
Going back to our example, consider a selector such as
ul.myList > li > a
This selector selects only links that are direct children of list elements, which are
in turn direct children of
in turn direct children of
<ul>
elements that have the class
myList
. The links
contained in the sublists are excluded because the
<ul>
elements serving as the
Figure 2.3 All anchor tags that are descendents, at any depth, of an
<li>
element are selected by
ul.myList
li
a
.