From JQuery In Action 2nd:
The first thing we need to do when using virtually any jQuery method (frequently referred to as jQuery wrapper methods) is to select some document elements to act
upon. Sometimes, the set of elements we want to select will be easy to describe, such as “all paragraph elements on the page.” Other times, they’ll require a more complex description like “all list elements that have the class listElement, contain a link, and are first in the list.”
Fortunately, jQuery provides a robust selector syntax we can use to easily specify sets of elements elegantly and concisely. You probably already know a big chunk of the syntax:jQuery uses the CSS syntax you already know and love, and extends it with some custom means to perform both common and complex selections.
In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element.
The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive.
The following table summarizes CSS 2.1 selector syntax:
Pattern | Meaning | Described in section |
---|---|---|
* | Matches any element. | Universal selector |
E | Matches any E element (i.e., an element of type E). | Type selectors |
E F | Matches any F element that is a descendant of an E element. | Descendant selectors |
E > F | Matches any F element that is a child of an element E. | Child selectors |
E:first-child | Matches element E when E is the first child of its parent. | The :first-child pseudo-class |
E:link E:visited |
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). | The link pseudo-classes |
E:active E:hover E:focus |
Matches E during certain user actions. | The dynamic pseudo-classes |
E:lang(c) | Matches element of type E if it is in (human) language c (the document language specifies how language is determined). | The :lang() pseudo-class |
E + F | Matches any F element immediately preceded by a sibling element E. | Adjacent selectors |
E[foo] | Matches any E element with the "foo" attribute set (whatever the value). | Attribute selectors |
E[foo="warning"] | Matches any E element whose "foo" attribute value is exactly equal to "warning". | Attribute selectors |
E[foo~="warning"] | Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". | Attribute selectors |
E[lang|="en"] | Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". | Attribute selectors |
DIV.warning | Language specific. (In HTML, the same as DIV[class~="warning"].) | Class selectors |
E#myid | Matches any E element with ID equal to "myid". | ID selectors |
See also http://www.w3.org/TR/CSS2/cover.html#minitoc