Search This Blog

Thursday, July 01, 2010

Complex CSS3 Expressions in MooTools: Reference Guide


In addition to standard CSS expressions . . . Selectors.js also allows you to select on element properties such as name, value, or href using standard CSS3 expressions (see http://www.w3.org/TR/css3-selectors/#attribute-representation).

Example:

// All the mail-to links on the page:
$$('a[href^=mailto:]');
The following expressions are supported:

= The property is equal to the value.
^= The property begins with the value.
$= The property ends with the value.
!= The property is not equal to the value.
*= The property contains the value.
~= The property is found when the value is split on spaces (so ~=foo matches “blah foo bar” but not “blahfoobar”).
|= The property is found when the value is split on dashes (so |=foo matches “blah-foo-bar” but not “blahfoobar”).

Here are a few more examples:
// All the inputs where name equals 'email'
$$('input[name=email]')
// All the images with urls that end in .gif
$$('img[src$=gif]')
// All the links without target="_blank"
$$('[target!=_blank]')
Note that these expressions can take double or single quotes when you want to search for something that has a space or other character:
$$('input[name!="user[username]"]')
$$('img[src$=".gif"]')

Source: Newton, Aaron. MooTools Essentials. Apress, 2008. 106–107.