Search This Blog

Showing posts with label complex CSS3 expressions. Show all posts
Showing posts with label complex CSS3 expressions. Show all posts

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.