Create Custom Pseudo Class Selectors Using the Slick Selector Engine

As I mentioned in my previous post about the Slick selector engine, Create Elements on the Fly with MooTools 1.3 and Slick, Slick is extremely flexible. Part of that flexibility is the ability for you to define custom pseudo class selectors to better gather the elements that meet your needs.

It all starts with the Slick.definePseudo method; just give Slick.definePseudo the name of your pseudo class selector and a function returning true (matched) or false (not a match).

The Slick JavaScript

Slick.definePseudo('key',function(optionalArgument) {
	var trueOrFalse;
	
	// logic here to determine if there is a match
	
	return trueOrFalse;
})

The above code sample displays the basic format of defining a custom pseudo class selector. Let's create a few "realistic" pseudo class selectors.

Elements with a Storage Value

Slick.definePseudo('storage',function(key) {
	return document.id(this).retrieve(key);
});

The above code sample allows you to find elements with a given storage value based on the provided key.

Elements with a Specified Event Type

Slick.definePseudo('hasEvent',function(eventType) {
	var self = document.id(this);
	return eventType && 
		   self.retrieve('events') && 
		   self.retrieve('events')[eventType] &&
		   self.retrieve('events')[eventType].length;
});

The above code sample allows you to find elements with a MooTools-given click event.

Form Elements

Slick.definePseudo('form',function() {
	var tag = document.id(this).get('tag'), elements = ['textarea','select','input','button']
	return elements.contains(tag);
});

The above code sample allows you to get all form elements within a given form.

Those are just a few examples of creating your own custom pseudo class selectors. Another great thing about Slick is that numerous psuedo class selectors are already defined: empty, not, contains, first-child, last-child, only-child, nth-child, nth-last-child, nth-of-type, nth-last-of-type, index, even, odd, first-of-type, last-of-type, only-of-type, enabled, disabled, checked, and selected.

Slick comes bundled with MooTools 1.3 but do remember that Slick is framework-independent an can function on its own. Can you think of any other pseudo class selectors that would be useful? Share them!