YUI3 Tutorial: YUI Attribute Selector. Working with Attribute Selector

Here is a separate article on attribute selector. The attribute selector was not working in flexible way. I was facing problem is excluding some some tag based on attribute differences.

Here is the HTML snippet I was using and I will use here for Attribute selector example:

<a rel="me" href="http://newsviews.satya-weblog.com/">My general blog</a>
<a href="http://www.satya-weblog.com/">Tech blog</a>

One link is having rel=me while other does not. I was facing problem in selecting 2nd one only based on Attribute selector. I want to use such that I can exclude while selecting a tag.

Here is the YUI3 code which will tell you all about working and not working code on Attribute selector.
There are two ways to use attribute selector. One is to use filter() and another way is to use attributes while specifying selector in first place. Both examples are mentioned below. Angle/Square bracket is required for filter to work with attributes.


// 'selector-css3' module is required to use CSS3 style selector
// Working
//Y.log(Y.all('a:not(a[rel=me])').size());
// Not working
//Y.log(Y.all('a').filter(':not(a[rel=me])').size());
// Working but only consider attribute name and not value
//Y.log(Y.all('a').filter(':not(a[rel])').size());
// Not working
//Y.log(Y.all('a').filter(':not(a[rel=me])').size());
// Working
//Y.log(Y.all('a').filter(':not([rel^=me])').size());
// Working
//Y.log(Y.all('a').filter(':not([rel=me])').size());
// Working
//Y.log(Y.all('a').filter(':not([rel*=me])').size());
// Not working. Angle/Square bracket is required for filter to work with attributes.
//Y.log(Y.all('a').filter(':not(rel*=me)').size());
// Working
// Y.all('a:not([rel=me])').on('mouseenter', mouseEnter);
// Working
// Y.all('a:not(a[rel=me])').on('mouseenter', mouseEnter);
// Working
//Y.all('a:not(a[rel*=me])').on('mouseenter', mouseEnter);
// Working
Y.all('a:not(a[rel*=me])').on('mouseenter', mouseEnter);
Y.all('a:not(a[rel*=me])').on('mouseleave', mouseLeave);

Use "selector-css3" module if you wish to work with CSS3 selector. YUI3 uses CSS2.1 selector.

YUI().use('event-mouseenter', 'selector-css3', function () { } );

Attributes mentioned here used in mouseenter, mouseout, mouseover, mouseleave event discussion with examples.