Supported CSS selectors are
- class selectors, e.g., ".foo"
- node type selectors, e.g. "span"
- descendant selectors, e.g. "table div"
- > child element selectors, e.g. "#tabular_data > div"
- #foo style ID selectors
- * universal selector
- ~, the immediately preceeded-by sibling selector
- +, the preceeded-by sibling selector
It is also possible to query attributes:
- [foo] attribute presence selector
- [foo='bar'] attribute value exact match
- [foo~='bar'] attribute value list item match
- [foo^='bar'] attribute start match
- [foo$='bar'] attribute end match
- [foo*='bar'] attribute substring match
Pseudo class selectors are also supported
- :first-child, :last-child, and :only-child positional selectors
- :empty content empty selector
- :checked pseudo selector
- :nth-child(n), :nth-child(2n+1) style positional calculations
- :nth-child(even), :nth-child(odd) positional selectors
- :not(...) negation pseudo selectors
To be clear about this one: The fastest
way to get a handle of a DOM node via an ID is to use dojo.byId().
In our sample application we want to
assign a different background to every other session. Here is the JavaScript
code to achieve this:
dojo.addOnLoad(function(){
// every odd div in the page with the class "session"
assigned
dojo.query(".session:nth-child(odd)").addClass("oddSession");
});The
result can be viewed here.
The method dojo.query(".session:nth-child(odd)")
returns a list of all the "odd" DOM nodes, which uses the CSS
class ".session". To this DOM nodes the CSS class "oddSession"
will be added with the command .addClass ("oddSession"). Everybody
who takes a closer look at the sample
page and the structure of the
HTML code will discover two strange things. First, the DOM nodes returned
are not really child's of the nodes with the "session" class
as one would expect by the expression nth-child. In fact the method returns
all the odd DOM nodes with the given class. Second, when counting dojo
starts with zero. In the sample actually all the even sessions have the
additional "oddSession" CSS class. 
Now I have to explain the method dojo.addOnLoad().
In the previous
article we called the function
to fade in the headline by using the onLoad event of the body tag. Although
it worked this is not the right way in dojo. It could happen that at the
time the onLoad event fires not all dojo components are loaded and initialized.
If we would try use one of those components an error would be the consequence.
By using dojo.addOnLoad() we ensure that all dojo components are loaded
and initialized before the registered function are called.
In the next
dojo article I will talk about
the dojo.fx package, which has all we need to animate the elements on our
web page.
