15.2.5 Selecting Elements with CSS Selectors
CSS stylesheets have a very powerful syntax, known as selectors, for describing elements or sets of elements within a document. Full details of CSS selector syntax are beyond the scope of this book,1 but some examples will demonstrate the basics. Elements can be described by ID, tag name, or class:
#nav // An element with id="nav" div // Any
More generally, elements can be selected based on attribute values:
p[lang="fr"] // A paragraph written in French:
*[name="x"] // Any element with a name="x" attribute
These basic selectors can be combined:
span.fatal.error // Any with "warning" and "fatal" in its class span[lang="fr"].warning // Any warning in French
Selectors can also specify document structure:
#log span // Any descendant of the element with id="log" #log>span // Any child of the element with id="log" body>h1:first-child // The first
child of the
Selectors can be combined to select multiple elements or multiple sets of elements:
div, #log // All
1. CSS3 selectors are specified by http://www.w3.org/TR/css3-selectors/ .
15.2 Selecting Document Elements | 369
methods for obtaining the elements that match a given selector.2 The key to this API is the Document method querySelectorAll(). It takes a single string argument containing a CSS selector and returns a NodeList that represents all elements in the document that match the selector. Unlike previously described element selection methods, the NodeList returned by querySelectorAll() is not live: it holds the elements that match the selector at the time the method was invoked, but it does not update as the document changes. If no elements match, querySelectorAll() returns an empty NodeList. If the selector string is invalid, querySelectorAll() throws an exception.
In addition to querySelectorAll(), the document object also defines querySelector(), which is like querySelectorAll(), but returns only the first (in document order) matching element or null if there is no matching element.
These two methods are also defined on Elements (and also on DocumentFragment nodes; see §15.6.4 ). When invoked on an element, the specified selector is matched against the entire document, and then the result set is filtered so that it only includes descendants of the specified element. This may seem counterintuitive, as it means that the selector string can include ancestors of the element against which it is matched.
Note that CSS defines :first-line and :first-letter pseudoelements. In CSS, these match portions of text nodes rather than actual elements. They will not match if used with querySelectorAll()or querySelector(). Also, many browsers will refuse to return matches for the :link and :visited pseudoclasses, as this could expose information about the user’s browsing history.
All current browsers support querySelector()and querySelectorAll(). Note, however, that the specification of these methods does not require support for CSS3 selectors: browsers are encouraged to support the same set of selectors that they support in style-sheets. Current browsers other than IE support CSS3 selectors. IE7 and 8 support CSS2 selectors. (IE9 is expected to have CSS3 support.)
jQuery’s CSS selector matching code has been factored out and released as a standalone library named Sizzle, which has been adopted by Dojo and other client-side libraries.3 The advantage to using a library like Sizzle (or a library that uses Sizzle) is that
- The Selectors API standard is not part of HTML5 but is closely affiliated with it. See http://www.w3.org/ TR/selectors-api/ .
- A stand-alone version of Sizzle is available at http://sizzlejs.com .
selections work even on older browsers, and there is a baseline set of selectors that are guaranteed to work on all browsers.