The Spry Element Selector is a utility that lets you use CSS selectors to select elements on a page and then apply functionality to those elements. The utility gives you the ability to build Spry pages with unobtrusive javascript. Using the utility, you can select a single element on the page or multiple elements. The utility supports most CSS 3 selectors.

The utility is actually a JavaScript function called Spry.$$(). When you call this function, you pass a string that is a CSS Selector as the first argument. The $$ function uses the selector string to find all elements in the document that match the selector, and then returns the matching elements in an array. If the function finds no matches, it returns an empty array. Whatever the case, the function always returns an array.

The CSS selectors you use in the Spry Element Selector are the same selectors you use in normal CSS rules. For example, if you have a div that has a product class assigned to it, and you wanted to style all of the spans inside that div to have a background color of blue, you might write the following CSS:

<style>
div.product span {
background-color: blue;
}
</style>

If you wanted to do this programatically with the Spry Element Selector, you would write something like this:

<script type="text/javascript">
// Find the matching elements:
var matchesArray = Spry.$$("div.product span");
// Apply a blue background to each element in the array.
matchesArray.setStyle("background-color: blue");
</script>

For examples of the Element Selector utility in action, visit the Samples page on Adobe Labs.