Document directory
Introduction
CssQuery () is a powerful cross-browser JavaScript function that enables querying of a DOM document using CSS selectors. All CSS1 and CSS2 selectors are allowed plus quite a few CSS3 selectors.
Usage
Syntax
Elements = cssQuery (selector [, from]); where selector (required) is a valid CSS selector and from (optional) is a document, element or array of elements which is filtered by selector.
The function returns a JavaScript array of elements. If there is no match, an empty array is returned.
Some examples:
// Find all paragraphs that are direct descendants // of the document bodyvar tags = cssQuery ("body> p "); // find all elements with the "href" attributevar tags = cssQuery ("[href]"); // find all anchor elements with "href" equal to "#" var tags = cssQuery ("a [href = '#']"); // find all images contained by the above anchorsvar images = cssQuery ("img", tags); // find all listsvar tags = cssQuery ("dl, ol, ul "); // Query an external xml documentvar tags = cssQuery ("my |: root> my | link", myXMLDoc); // just plain complicatedvar complex = "p>: first-child + input [type = text] ~ Span "; var tags = cssQuery (complex); Allowed Selectors
*
E
E F
E> F
E + F
E ~ F
E. warning
E # myid
E: link
E: first-child
E: last-child
E: nth-child (n)
E: nth-last-child (n)
E: only-child
E: root
E: lang (fr)
E: target
E: enabled
E: disabled
E: checked
E: contains ("foo ")
E: not (s)
E [foo]
E [foo = "bar"]
E [foo ~ = "Bar"]
E [foo ^ = "bar"]
E [foo $ = "bar"]
E [foo * = "bar"]
E [foo | = "bar"]
Compatibility
Known to work on the following platforms:
Microsoft Internet Explorer 5 + (Windows)
Microsoft Internet Explorer 5.2 (Mac)
Firefox/Mozilla 1.6 +
Opera 7 +
Netscape 6 +
Safari 1.2
Source Code
- CssQuery. js
- CssQuery-level2.js
- CssQuery-level3.js
- CssQuery-standard.js