cssQuery()
version 2.0.2
getElementsByTagName? Pah!
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 body
var tags = cssQuery("body > p");
// find all elements with the "href" attribute
var tags = cssQuery("[href]");
// find all anchor elements with "href" equal to "#"
var tags = cssQuery("a[href='#']");
// find all images contained by the above anchors
var images = cssQuery("img", tags);
// find all lists
var tags = cssQuery("dl,ol,ul");
// query an external xml document
var tags = cssQuery("my|:root>my|link", myXMLDoc);
// just plain complicated
var complex = "p>a: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
