$$(cssRule...) -> [HTMLElement...]

Takes an arbitrary number of CSS selectors (strings) and returns a document-order array of extended DOM elements that match any of them.

Sometimes the usual tools from your DOM arsenal -- document.getElementById() encapsulated by $(), getElementsByTagName() and even Prototype's very own getElementsByClassName() extensions -- just aren't enough to quickly find our elements or collections of elements. If you know the DOM tree structure, you can simply resort to CSS selectors to get the job done.

Quick examples

// -> all DIVs in the document.  Same as document.getElementsByTagName('div')!

// -> same as $('contents'), only it returns an array anyway.

// -> all LI elements with class 'faux'

The $$ function searches the entire document. For selector queries on more specific sections of a document, use Element#getElementsBySelector.

Supported CSS syntax

The $$ function does not rely on the browser's internal CSS parsing capabilities (otherwise, we'd be in cross-browser trouble...), and therefore offers a consistent set of selectors across all supported browsers.

supported in v1.5.0

supported from v1.5.1

Virtually all of CSS3 is supported, with the exception of pseudo-elements (like ::first-letter) and some pseudo-classes (like :hover). Some examples of new selectors that can be used in 1.5.1:


$$('#contents a[rel]');
// -> all links inside the element of ID "contents" with a rel attribute

// -> all links with a href attribute of value "#" (eyeew!)

$$('#navbar a', '#sidebar a');
// -> all links within the elements of ID "navbar" or "sidebar"

With version 1.5.1 and above you can do various types of advanced selectors:

// -> all links, excluding those whose rel attribute contains the word "nofollow"

$$('table tbody > tr:nth-child(even)');
// -> all even rows within all table bodies

// -> all DIVs without content (i.e., whitespace-only)