Powerful JS function that enables querying of a DOM document using CSS selectors.

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

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

Demo: http://dean.edwards.name/my/cssQuery/test.html
Download: http://deanedwards.googlecode.com/svn/trunk/download/packer2.net.zip
Source: http://dean.edwards.name/my/cssQuery/

Related Listings:

1. IE7.js : a fix to IE bugs IE7 is a JavaScript library to make MSIE behave like...
2. Treeview Plugin – JQuiry Plugin Create a nice expanding and collapsing tree view control using...
3. TaskSpeed – Library Task Test Suite This is not SlickSpeed, though uses the same framework. Tests...
4. Web Forms 2.0 Script A cross-browser implementation of the WHATWG Web Forms 2.0 specification....
5. Tables with Style CSS It might not seem like it but styling tabular data...

Do you like this post?

Email: