This is a point of confusion, for some: How can you use CSS and XPath together, they're so different! jQuery makes some allowances to make this happen, but we think that developers will really appreciate the advantages of each language. Here are some examples:

Hide all Paragraph elements that contain a class attribute:

 $("p[class]").hide(); Show the first paragraph on the page: 显示文章中第一个段落 $("p:eq(0)").show();

Hide all divs that are currently showing:

 $("div:visible").hide(); Get all list items that are children of an unordered list: 获得所有ul 中的li $("ul/li") /* valid too: $("ul > li") */ Get all Paragraphs, with a class of 'foo', that have a link in them: 获取段落，条件为样式表为foo的超连接 $("p.foo[a]");

Get list item that contains link with "Register" text inside:

 $("li[a:contains('Register')]"); Get the input field's value with the name of 'bar': 获取输入框的文字，输入框的名字为bar $("input[@name=bar]").val();

 $("input[@type=radio][@checked]") If you still have questions concerning how this selector language works, please feel free to post to the mailing list. ## CSS Selectors jQuery has full CSS 1-2 support and partial CSS 3 support, along with some custom CSS-like functionality (and XPath), as part of it's expression. For info on how CSS works feel free to read the various links: What follows is a list of supported CSS Selector expressions. • * any element • E an element of type E • E:nth-child(n) an E element, the n-th child of its parent • E:first-child an E element, first child of its parent • E:last-child an E element, last child of its parent • E:only-child an E element, only child of its parent • E:empty an E element that has no children (including text nodes) • E:enabled a user interface element E which is not disabled • E:disabled a user interface element E which is disabled • E:checked a user interface element E which is checked (for instance a radio-button or checkbox) • E:selected a user interface element E which is selected (one or more option elements inside a select) - not in the CSS spec, but nonetheless supported by jQuery • E.warning an E element whose class is "warning" • E#myid an E element with ID equal to "myid". (Will only match, at most, one element.) • E:not(s) an E element that does not match simple selector s • E F an F element descendant of an E element • E > F an F element child of an E element • E + F an F element immediately preceded by an E element • E ~ F an F element preceded by an E element • E,F,G select all E elements, F elements, and G elements ### Supported, but different All attribute selectors are written like their XPath counter-parts (in that all attributes should begin with an @ symbol). • E[@foo] an E element with a "foo" attribute • E[@foo=bar] an E element whose "foo" attribute value is exactly equal to "bar" • E[@foo^=bar] an E element whose "foo" attribute value begins exactly with the string "bar" • E[@foo$=bar] an E element whose "foo" attribute value ends exactly with the string "bar"
• E[@foo*=bar] an E element whose "foo" attribute value contains the substring "bar"
• E[@foo=bar][@baz=bop] an E element whose "foo" attribute value is exactly equal to "bar" and whose "baz" attribute is exactly equal to "bop"

### Not supported

jQuery only supports selectors that actually select DOM elements - everything else is ignored.

• E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
• E:active
• E:hover
• E:focus an E element during certain user actions
• E:target an E element being the target of the referring URI
• E::first-line the first formatted line of an E element
• E::first-letter the first formatted letter of an E element
• E::selection the portion of an E element that is currently selected/highlighted by the user
• E::before generated content before an E element
• E::after generated content after an E element

jQuery doesn't support the following selectors due to their lack of real-world usefulness:

• E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
• E:nth-of-type(n) an E element, the n-th sibling of its type
• E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
• E:first-of-type an E element, first sibling of its type
• E:last-of-type an E element, last sibling of its type
• E:only-of-type an E element, only sibling of its type
• E:lang(fr) an element of type E in language "fr"
• E[foo~="test"] an E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "test"
• E[hreflang|="en"] an E element whose "hreflang" attribute has a hyphen-separated list of values beginning (from the left) with "en"

In jQuery, unlike real CSS, a selector expression may have a context other than the entire document, for instance with the function $(expr, context). You can anchor a CSS-like expression to the context root by starting it with one of the selectors >, +, or ~. ## XPath Selectors One of the selector languages that jQuery supports, as a part of its expression language is XPath. jQuery supports basic XPath expressions, in addition to CSS 1-3. Here are some samples: ### Location Paths • Relative to the entire HTML document $("/html/body//p") $("body//p")$("p/../div")
• Relative to the context node this
 $("p/*", this)$("/p//a", this)

### Supported Axis Selectors

• Descendant Element has a descendant element
 $("//div//p") • Child Element has a child element $("//div/p")
• Preceding Sibling Element has an element before it, on the same axes
 $("//div ~ form") • Parent Selects the parent element of the element $("//div/../p")

### Supported Predicates

• [@foo] Has an attribute of foo
 $("//input[@checked]") • [@foo='test'] Attribute foo is equal to test $("//a[@ref='nofollow']")
• [Nodelist] Element contains a node list, for example:
 $("//div[p]")$("//div[p/a]")

### Supported Predicates, but differently

• [last()] or [position()=last()] becomes :last
 $("p:last") • [0] or [position()=0] becomes :eq(0) or :first $("p:first") $("p:eq(0)") • [position() < 5] becomes :lt(5) $("p:lt(5)")
• [position() > 2] becomes :gt(2)

### Form Selectors

There are a few selectors for form elements:

• :input Selects all form elements (input, select, textarea, button).
• :text Selects all text fields (type="text").
• :checkbox Selects all checkbox fields (type="checkbox").
• :submit Selects all submit buttons (type="submit").
• :image Selects all form images (type="image").
• :reset Selects all reset buttons (type="reset").
• :button Selects all other buttons (type="button").
• :file Selects all <input type="file">.

Also available is :hidden, see the description above for details.

It is recommended to provide a context when using the above:

 $('#myForm :input') Or, if you have already a reference to your form: $('input:radio', myForm)

This would select all input elements of type radio inside myForm. Using :radio is mostly the same as [@type=radio], but should be slightly faster. Good to know when working with large forms.

### More Selectors

The jQuery selector system can be extended by third parties: