### Spry Element Selector Utility

This file contains code samples of each of the supported selectors in the Spry Element Selector utility.

Note: According to the spec, spaces are generally not allowed within the selector except where part of the actual selector, so

    Spry.$$("div p").addClassName("redText"); Correct
    Spry.$$("p[class~=dev").setAttribute("align", "left"); Correct.

    Spry.$$("p[class ~= dev").setAttribute("align", "left"); Not correct.

Pattern | Code
--- | ---
E | An element of type E Spry.$$("span").addClassName("boldText"); "Get all <span> tags and add the 'boldText' class to them.
E.ClassName | 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."
E#myid | 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'"
E F | 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'."
E:first-child | 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.
E[foo] | 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.
E > F | 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.
E[foo~=bar] | 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'."
E[hreflang|=en] | 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.
E[foo=bar] | 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.
E[foo$=bar] | 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.
E[foo^=bar] | 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.
E[foo*=bar] | 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.
E + F | 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>
E ~ F | An F element preceded by an E element Spry.$$("div~span").addClassName("red"); Select any <span> that is preceeded by a <div> tag and add the red class from it.
E:last-child | 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.
E:nth-last-of-type(n) | 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.
E:nth-of-type(n) | 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.
E:nth-last-child(n) | 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.
E:empty | 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.
E:nth-child(n) | 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.
E:not(s) | 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.
E:only-child | 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.
E:only-of-type | 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.
E:last-of-type | 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.
E:first-of-type | 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.
E:enabled | 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.)
E: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.
E:checked | 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.

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.