An E element with a specified class name

Spry.$$("span.highlight").removeClassName("highlight");

"Get all <span> tags with the class 'highlight' and remove the 'highlight' class."

An E element with ID equal to "myid".

Spry.$$("div#container").removeClassName("mainBlock");

"Get the <div> with an ID of 'container' and remove
the class 'mainblock'"

An F element descendant of an E element

Spry.$$("div p").addClassName("redText");

"Select every <p> tag that is within any
<div> tag and apply the 'redText' class to them."

Any element

Spry.$$("*.hightlight").addClassName("boldText");

"Get any tag with the class 'highlight' and add
the class 'boldText'."

An E element, first child of its parent

Spry.$$("p:first-child").setClassName("red");

Select all the <p> tags that is the first tag within
a container tag.

An E element with a "foo" attribute

Spry.$$("p[id]").setAttribute("tabindex", "0");

"Select any <p>tag that has an ID defined
and add a 'tabindex' attribute with a value of 0.
Note: This will fail on Internet Explorer, when using E[class]. In the DOM, IE adds a class attribute to every element, regardless of the markup.

An F element child of an E element

Spry.$$("div>span").addClassName("red");

Select any <span> that is a direct descendent of a <div> and apply the 'red'class.

An E element whose "foo" attribute value
is a list of space-separated values,
one of which is exactly equal to "bar"

Spry.$$("p[class~=bodyText]").setAttribute("align", "left");

"Select any <p>tag that has a class attribute
that contains the 'bodyText' class
and set the 'align' attribute with a value of 'left'."

An E element whose "hreflang" attribute has
a hyphen-separated list of values
beginning (from the left) with "en"

Spry.$$("[hreflang|=en]").setAttribute("align", "left");

Select all elements that have a hreflang attribute that
lists "en" first among the values.

An E element whose "foo" attribute value is
exactly equal to "bar"

Spry.$$("[class=highlight]").addClassName("red");

Select any element with a class name only equal
to 'highlight' and add the class name 'red' to it.

An E element whose "foo" attribute value
ends exactly with the string "bar"

Spry.$$("[class$=red]").addClassName("blue");

Select all elements that have a class attribute
who's last value is 'red' and add the 'blue' class to it.

An E element whose "foo" attribute value
begins exactly with the string "bar"

Spry.$$("[class^=red]").addClassName("blue");

Select all elements that have a class attribute
who's first value is 'red' and add the 'blue' class to it.

An E element whose "foo" attribute value
contains the substring "bar"

Spry.$$("[class*=red]").addClassName("blue");

Select all elements that have a class attribute
that has value 'red' in it and add the 'blue' class to it.

An F element immediately preceded
by an E element

Spry.$$("div+p").removeClassName("bodyText");

Select any <p> that comes right after a <div> tag
and remove the 'bodyText' class from it. <div></div><p>, not <div><p></div>

Spry.$$("div~span").addClassName("red");

Select any <span> that is preceeded by a <div> tag
and add the red class from it.

An E element, last child of its parent

Spry.$$("p:last-child").addClassName("red");

If a <p> is the last tag within another tag,
add the 'red' class name to it.

An E element, the n-th sibling of its type,
counting from the last one

Spry.$$("span:nth-last-of-type(1)").removeClassName("highlight");

Select the first <span> tag, starting from the bottom,
and remove the 'highlight' class.

An E element, the n-th sibling of its type

Spry.$$("p:nth-of-type(3)").addClassName('red");

Select the 3rd <p> tag within any parent element and
apply the 'red' class to it.

An E element, the n-th child of its parent,
counting from the last one

Spry.$$("p:nth-last-child(3)").addClassName("red");

Select the 3rd tag from the bottom within any parent element. If it is a <p>, apply the 'red' class to it.

An E element that has no children
(including text nodes)

Spry.$$("div:empty").addClassName("red");

Select any <div> that does not have tags
within it and add the 'red' class to it.

An E element, the n-th child of its parent

Spry.$$("div:nth-child(3)").addClassName("red");

Select any 3rd child tag that is a DIV and apply the 'red' class name.

An E element that does not match
simple selector s

Spry.$$("p:not(.closer)").addClassName("red");

Select any <p> that does not have a 'closer' class and add the 'red' class.

An E element, only child of its parent

Spry.$$("p:only-child").addClassName("red");

Select all the <p> tags only if they are the only child tag of the parent tag.

An E element, only sibling of its type

Spry.$$("p.bodyText:only-child").addClassName("red");

Select all <p.bodyText> tags but only if it is the only
instance of that tag within the parent.

An E element, last sibling of its type

Spry.$$("span.highlight:last-of-type").addClassName("red");

Select the last <span>
in the parent tag and, if it has the 'highlight' class, adds the 'red' class name.

An E element, first sibling of its type

Spry.$$("p.bodyText:first-of-type").addClassName("red");

Select the first instance of <p> in the parent tag
and if it has the 'bodyText' class, applies the 'red' class to it.

An interface element E which is enabled

Spry.$$("input:enabled").addClassName("green");

Select all <input> tags that are currently enabled and
apply the 'green' class to them. (Enabled form fields are
all those that aren't explicitly disabled.)

An interface element E which is enabled

Spry.$$("input:disabled").addClassName("red");

Select all <input> tags that are set to 'disabled' and
add the 'red' class name.

An interface element E which is checked (for instance a radio-button or checkbox)

Spry.$$("input:checked").addClassName("red");

Select all <input> tags that are currently checked and
apply the 'red' class to them.