Create Custom Pseudo Class Selectors Using the Slick Selector Engine

By  on  

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!

Recent Features

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • By
    iPhone-Style Passwords Using MooTools PassShark

    Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone's method of showing/hiding the last character in a password field. This gem of...

Discussion

  1. I should mention that I am mixing MooTools within the pseudo class selectors. You can easily mix jQuery or any other library functionalities in too!

  2. I find myself repeatedly doing things like this in 1.2. The Slick code with 1.3 is …well…slick!

    This method coupled with the new HTML 5 elements will make our code much more readable.

  3. Matthew F

    Just to clarify: E.g. from the Storage Value example, when you’ve stored a value:

    element.store('storage','picture'); 
    

    Then, after calling Slick.definePseudo(…), you could in the future retrieve it and all elements with the same storage value by:

    $$(':picture').each(...);
    

    Is that roughly the idea?

  4. Be carefull cause these functionality are used in a loop so you should always optimize it as much as possible. Try not to use document.id on “this” (if its not necessary of course) for example.

  5. @Fábio Miranda Costa: For simple stuff, yes.

  6. You should provide a usage example for each selector you defined. This article is still relevant and I bet will stay relevant for a while, so enhance it.

    Otherwise, useful and cool! :)

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!